Question

我试图用我的导航链接解决我遇到的问题，在不同的div容器中显示多个内容。

我目前有4个带溢出的容器：隐藏在一个页面上。我已经在每个内容中添加了与4个不同导航链接相关的锚点。我遇到的问题是当我点击其中一个导航链接时，只有一个div将其内容移动到相关的锚点而不是一次全部。

示例：

导航

    <div class="nav_link"><p><a href="#anchor2">WHAT WE DO</a></p></div>
    <div class="nav_space"></div>
    <div class="nav_link"><p><a href="#anchor3">OUR PHILOSOPHY</a></p></div>
    <div class="nav_space"></div>
    <div class="nav_link"><p><a href="#anchor4">THE PANTRY</a></p></div>
    <div class="nav_space"></div>
    <div class="nav_link"><p><a href="#anchor5">CONTACT</a></p></div>

容器1（工作正常）

    <div class="identity"><a name="anchor1"></a><span class="ArialBol21Red">Gocek</span><span class="ArialBol14Red">Turkey</span></div>
    <div class="identity"><a name="anchor2"></a><span class="ArialBol14Red">What we do</span></div>
    <div class="identity"><a name="anchor3"></a><span class="ArialBol14Red">Our philosophy</span></div>
    <div class="identity"><a name="anchor4"></a><span class="ArialBol14Red">The pantry</span></div>
    <div class="identity"><a name="anchor5"></a><span class="ArialBol14Red">Contact</span></div>

容器2（没有工作）

    <div class="leftcontent_box"><a name="anchor2"></a>What we do</div>
    <div class="leftcontent_box"><a name="anchor3"></a>Our philosophy</div>
    <div class="leftcontent_box"><a name="anchor4"></a>The pantry</div>
    <div class="leftcontent_box"><a name="anchor5"></a>Contact</div>

我猜它是在第一个容器中找到锚点，而不是在为同一个锚点查看其他容器。

希望这有一定道理。

APPROACH 2（将相关类中的每个类别内容包装起来，然后让链接使所有特定类成为容器的顶部？）

    <div id="page_identifier_box">

    <div class="identity"><div class="anchor1"><span class="ArialBol21Red">Gocek</span><span class="ArialBol14Red">Turkey</span></div></div>
    <div class="identity"><div class="anchor2"></a><span class="ArialBol14Red">What we do</span></div></div>
    <div class="identity"><div class="anchor3"></a><span class="ArialBol14Red">Our philosophy</span></div></div>
    <div class="identity"><div class="anchor4"></a><span class="ArialBol14Red">The pantry</span></div></div>
    <div class="identity"><div class="anchor5"></a><span class="ArialBol14Red">Contact</span></div></div>

    </div>

    <div id="leftcontent">


    <div id="leftcontent_box"><div class="anchor1"><div id="leftcontent_main_photo"><img src="leftcontent_main_image.jpg"></div><div id="leftcontent_main_text"><span class="ArialReg12Black">Order fresh in season strawberries supplied from the local market for just £16.</span></div></div></div>

    <div class="leftcontent_box"><div class="anchor2">What we do</div></div>

    <div class="leftcontent_box"><div class="anchor3">Our philosophy</div></div>

    <div class="leftcontent_box"><div class="anchor4">The pantry</div></div>

    <div class="leftcontent_box"><div class="anchor5">Contact</div></div>

    </div>

Answer 1

根据html规范id在您的html文档中必须是唯一的。如果不是，事情将无法按预期发挥作用。因此，请修复您的ID，确保它们是唯一的，然后重试。

<强>更新

我明白你的意思了。问题不在于ID的唯一性，而在于锚名称。根据{{3}}，锚名称在文档中也必须是唯一的。

一个链接到多个容器锚点

1 个答案: