我正在尝试解决我的导航链接在不同的 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>
最佳答案
根据 html 规范,id
在您的 html 文档中必须是唯一的。否则,事情将不会按预期进行。因此,修正您的 ID,确保它们是唯一的,然后重试。
更新
我明白你的意思了。问题不在于 ID 的唯一性,而在于 anchor 名称。根据specification anchor 名称在文档中也必须是唯一的。
关于javascript - 一个链接到多个容器 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9071340/