gpt4 book ai didi

html - 这个导航可以完全用CSS完成吗

转载 作者:太空狗 更新时间:2023-10-29 15:02:09 26 4
gpt4 key购买 nike

我有点卡住了。我已经创建了下图中的几乎所有内容。我坚持的是我试图弄清楚如何设置它,以便当用户单击其中一个链接时,它会使下面的行变为红色(在下一页加载后)。显然我需要使用 Jquery 来检测页面然后添加内联 css,但我正在努力的是我希望这尽可能简单以便我可以将此模板提供给其他人然后他们可以添加或删除元素必要的。我试图弄清楚我是否可以以某种方式使用 li 元素来执行此操作,但我还没有找到方法。有没有人有任何想法可以帮助我?

enter image description here

最佳答案

你可以做到 the way jackJoe suggests并设置 active在当前所选页面上类服务器端,但您也可以使用纯 CSS 和一些提前计划来完成此操作。

这涉及首先设置 id <body> 的属性您页面的标记,无论如何,这是一个很好的做法。然后,您的 CSS 文件将利用该主体 id确定哪个 <li>应显示为“事件”。

示例页面代码:

<body id="main"> <!-- change this id for each page -->
<ul>
<li class="main-nav"><a href="#">Main</a></li>
<li class="community-nav"><a href="/community">Community</a></li>
<li class="search-nav"><a href="/search">Search</a></li>
</ul>
</body>

示例 CSS:

li.main-nav,
li.community-nav,
li.search-nav
{
background: #FFF;
/* your other awesome styles */
}

#main li.main-nav,
#community li.community-nav,
#search li.search-nav
{
/* style the active tab differently */
background: #F00;
}

这样,导航部分的 HTML 代码可以在每个页面上保持完全静态。它不必在服务器端呈现或在客户端动态修改。

CSS 技巧上有一篇关于此技术的精彩文章:ID Your Body For Greater CSS Control and Specificity

关于html - 这个导航可以完全用CSS完成吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9846083/

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