将 HTML 锚链接附加到导航菜单栏中的下拉列表答案

【问题标题】：Attaching a HTML anchor link to a Dropdown in a Nav menu bar将 HTML 锚链接附加到导航菜单栏中的下拉列表
【发布时间】：2023-01-25 07:34:06
【问题描述】：

<div class="dropdown">
                    <button class="dropbtn"><a href="#Control-Center"> Control Center</a>
                    </button>
                    <div class="dropdown-content">
                        <a href = "">Trend</a>
                        <a href = "">Intel</a>
                    </div>
                </div>

我的网页上有一个名为“控制中心”的部分，我想这样做，以便当有人点击导航栏时，它会将他们带到页面的那个部分。我在悬停时下拉了导航栏，这样当他们单击导航栏时，它会将他们带到页面中的不同部分。当我向其中添加 <a href="#Control-Center"> 部分时，导航栏会出现所有错误。我试过像这样改变层次结构：

<div class="dropdown">
                    <a href="#Control-Center"><button class="dropbtn">Control Center</button></a>
                    <div class="dropdown-content">
                        <a href = "">Trend</a>
                        <a href = "">Intel</a>
                    </div>
                </div>

但它仍然看起来不太好。有功能，但下拉菜单变得乱七八糟。

任何建议将被认真考虑：）

谢谢你

【问题讨论】：

你不需要在标签中添加按钮，你可以给按钮 class="dropbtn" 。请分享您的 css，以便我们可以看到这样难以理解的问题
另请检查您是否正确地为您的部分提供了 id，也许您正在提供这样的 id="#Control-Center" 这样的 id，所以这就是为什么它会产生问题或在您的代码中缺少某些标记
是的，我给的是 id="#Control-Center"，如果不是这个我应该怎么给呢？我这样插入我的 id：<h2 id="Control-Center">Control Center</h2>

标签： html css

【解决方案1】：

一周前我在使用这个网页模板时遇到了同样的问题： W3 school template。

它不会在正常意义上跳转（超出 Top Nagivation 栏）。但是当我在靠近顶部的主页上复制该 JumpTo 链接（并将其隐藏在一个封闭的 JS 脚本中）时，它会跳转到那里，然后当我单击顶部导航栏按钮时，它会跳转到页面的最底部我想让它降落的地方。请参阅下文我们是如何做到的。

顶部导航：

<a href="#JumpTo" class="w3-bar-item w3-button">Projects</a>

靠近页面顶部但隐藏的地方：

<!--<a href="#JumpTo" class="w3-bar-item w3-button">&nbsp;</a>-->

页脚中页面底部的目的地（我测试过的地方）。

<footer id="JumpTo" class="w3-center w3-black w3-padding-16">

【讨论】：