gpt4 book ai didi

html - CSS:突出显示当前菜单项

转载 作者:行者123 更新时间:2023-11-27 22:43:49 26 4
gpt4 key购买 nike

我有一个带有以下形式的链接的菜单,我试图在其中突出显示当前菜单项。我似乎无法让它工作。请就我做错了什么提出建议

HTML

<body id="home">

                <div id="topMenu">
<div class="nav-home" id="topMenuBlock"><a href="" id="home"><p>Home</p></a></div>
<div id="nav-about"><a href="" id="about"><p>About</p></a></div>
<div id="nav-rates"><a href="" id="rates"><p>Rates</p></a></div>
<div id="nav-faq"><a href="" id="faq"><p>FAQ</p></a></div>
<div id="nav-contact"><a href="" id="contactus"><p>Contact</p></a></div>
<div id="nav-careers"><a href="careers.html" id="contactus"><p>Careers</p></a></div>
</div>

<div id="rightTopMenu"></div>
</div>...other stuff</body>

然后对于 CSS,我有以下内容:

#home a.nav-home{ border-bottom:2px solid white; }

链接是否必须在列表中,或者我可以将它们留在 div 中吗?如果是这样,我该如何进行?

谢谢。

最佳答案

你这里有点乱。

Do the links HAVE to be in a List, or can I leave them in div's?

它们不是必须,但它们可能应该是。没有充分的理由使用您选择的奇怪标记,您绝对应该考虑切换到列表和 <li>标签。

ID 重复的问题

  • 你有<body id="home"><a href="" id="home">
  • 您还有几个 id="topMenuBlock" 的实例(我看到你在编辑中修复了这个问题。)

您不能有多个具有相同 ID 的元素。 id属性必须始终是唯一的。如果有的话,请改用类名。

您正在使用此选择器:#home a.nav-home {}但它不匹配任何东西。没有 <a class="nav-home"> .你可以使用类似的东西:

  • #home {}因为那是 id<a>你想要的元素
  • .nav-home a {} - 选择 <a>在带有 class="nav-home" 的元素中

关于html - CSS:突出显示当前菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8860775/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com