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

6xfqseft  于 2023-01-28  发布在  其他
关注(0)|答案(2)|浏览(180)
<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>

但它看起来还是不太好。有功能,但下拉菜单失控。
任何建议都将不胜感激:)
谢谢

lb3vh1jj

lb3vh1jj1#

一周前使用此Web模板时遇到了同样的问题:W3 school template.
正常情况下它不会跳到顶部导航栏之外,但是当我复制了主页面顶部附近的跳转链接(并将其隐藏在一个关闭的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">
fgw7neuy

fgw7neuy2#

我想,这并不是你想要的,但也许可以试试HTML的细节元素?

<details>
<a href="https://ronnieroyston.com">link1</a><br>
<a href="https://ronnieroyston.com">link2</a><br>
<a href="https://ronnieroyston.com">link3</a>
</details>

相关问题