如何在jquery的另一个页面上链接特定的div内容?

问题描述 投票:0回答:1

我有一个名为mypage的drupal页面,我想从该页面导航到另一个页面div,我为此使用了定位标记,但它仍将转到另一个页面(样本发行页面)的顶部。

我拥有的代码:mypage:

<div class="anchors" id="anchors-0">
<span>sample page</span>
<ul>
<li><a href="https://mysite.dd:6123/sample-issue#anchor-0">issue1</a>
</li>
<li><a href="https://mysite.dd:6123/sample-issue#anchor-1">issue2</a>
</li>
</ul>
</div>

样本页面:

<div class="content-area">

            <div class="field field--name-field-section-title field--type-string field--label-hidden field--item"><a name="anchor-0"></a>issue1</div>

            <div class="field field--name-field-text field--type-text-long field--label-hidden field--item"><p>issue 1 summary.</p>


</div>

                      </div>
 <div class="content-area">

            <div class="field field--name-field-section-title field--type-string field--label-hidden field--item"><a name="anchor-1"></a>issue2</div>

            <div class="field field--name-field-text field--type-text-long field--label-hidden field--item"><p>issue 2 summary.</p>


</div>

                      </div>  
jquery drupal
1个回答
0
投票

.container { width: 80%; margin: 0 auto; } .bg-blue { background-color: blue; color: white; height: 100vh; } .bg-violet { background-color: blueviolet; color: white; height: 110vh; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Navigation</title> </head> <body> <a href="#violet-div">Goto Violet Div</a> <div class="container bg-blue" id="blue-div"> <p>Blue Div</p> </div> <div class="container bg-violet" id="violet-div"> <p>Blue Violet Div</p> </div> </body> </html>
上面的代码片段是您要实现的示例。您应该在标签中提供要导航到的ID of the Div<a href="#violet-div">Goto Violet Div</a>
显然,div应该具有相同的ID。<div class="container bg-violet" id="violet-div"></div>

在您的特定情况下,它将是:

mypage:

<div class="anchors"> <span>sample page</span> <ul> <li> <a href="https://mysite.dd:6123/sample-issue#anchor-0">issue1</a> </li> <li> <a href="https://mysite.dd:6123/sample-issue#anchor-1">issue2</a> </li> </ul> </div>

sample-issue:

<div class="content-area">

    <div class="field field--name-field-section-title field--type-string field--label-hidden field--item" id="anchor-0">
        <p>issue1</p>
    </div>

    <div class="field field--name-field-text field--type-text-long field--label-hidden field--item">
        <p>issue 1 summary.</p>
    </div>

</div>
<div class="content-area">

    <div class="field field--name-field-section-title field--type-string field--label-hidden field--item" id="anchor-1">
        <p>issue2</p>
    </div>

    <div class="field field--name-field-text field--type-text-long field--label-hidden field--item">
        <p>issue 2 summary.</p>
    </div>

</div>
© www.soinside.com 2019 - 2024. All rights reserved.