我有点卡住了。我已经创建了下图中的几乎所有内容。我坚持的是我试图弄清楚我将如何设置它，以便当用户单击其中一个链接时，它会使下面的行变为红色（在下一页加载后）。显然我需要使用 Jquery 来检测页面然后添加内联 css，但我正在努力的是我希望这尽可能简单，以便我可以将此模板提供给其他人，然后他们可以添加或删除项目必要的。我试图弄清楚我是否可以以某种方式使用li 元素来做到这一点，但我还没有找到办法。有人有什么想法可以帮助我吗？
【问题讨论】：
标签： html css navigation
您可以这样做 the way jackJoe suggests 并在当前选定的页面上设置 active 类服务器端，但您也可以使用纯 CSS 和一些预先计划来做到这一点。
这涉及首先为页面的<body> 标记设置id 属性，无论如何这是一个很好的实践。然后，您的 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 Tricks 上有一篇关于这种技术的精彩文章：ID Your Body For Greater CSS Control and Specificity
【讨论】：
这很简单。 为“活动”状态创建一个类并为其设置样式：
<li class="active">Home</li>
并设置样式（取决于 HTML 结构，但你懂的）
CSS：
.active {
border-bottom: 3px red solid;
}
您需要做的就是在页面加载时放置类（例如服务器端）
【讨论】：
像这样在 HTML 中构建您的菜单：
<body id='Search' >
<div id='menu'>
<div class='bars'></div>
<a href='/home/' title='Home'>Home</a>
<a href='/community/' title='Community'>Community</a>
<a href='/search/' title='Search'>Search</a>
<a href='/contact/' title='Contact'>Contact</a>
<div class='bars shift'></div>
</div>
</body>
请注意，body 标记具有特定于页面的 id（正如 Cody 建议的那样）。另请注意，此 id 必须与菜单链接的 title 属性的值相同。
然后使用这个 CSS：
.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;}
.shift {margin-top:-6px;}
#menu {font-family:arial;font-size:12pt;text-align:center;}
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;}
.active {border-bottom:5px solid red;}
最后，将这个 jQuery 添加到每个页面：
$(document).ready(function(){
var id = $('body').attr('id');
$('#menu a').each(function () {
var title = $(this).attr('title');
$(this).removeClass('active');
if (title == id) $(this).addClass('active');
});
});
你可以看到现场小提琴演示here。 （要测试，只需更改 body 元素的 id 并按运行即可。）
编辑：与 Cody Grays 的方法相比，这种方法的好处是，在添加、删除或编辑菜单项时，每次更改 HTML 时都不需要修改 css。另一方面，它使用 jQuery。但是，如果您想要一个纯 css 解决方案，只需删除 jQuery 和 body 元素的 id，而是直接将 .active 类应用于特定链接，具体取决于特定页面（类似于 jackJoe 的建议）。
如果您必须使用<li> 元素，则可以轻松修改。
【讨论】：