javascript - 一个链接到多个容器 anchor

Question

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

我目前有 4 个容器溢出:隐藏在一个页面上。我在每个内容中都放置了与 4 个不同导航链接相关的 anchor 。我遇到的问题是，当我单击其中一个导航链接时，只有一个 div 将其内容移动到相关的 anchor ，而不是一次全部移动。

例子:

导航

    <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>

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

希望这是有道理的。

方法 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 的唯一性，而在于 anchor 名称。根据specification anchor 名称在文档中也必须是唯一的。