这个导航可以完全在CSS中完成
atr*_*joe 6 html css navigation
我有点卡住了.我在下面的图片中创建了几乎所有内容.我坚持的是我试图弄清楚如何设置它,以便当用户点击其中一个链接时,它使下面的行变为红色(在下一页加载后).显然我需要使用Jquery来检测页面然后添加内联css,但我正在努力的是我希望这个尽可能简单,以便我可以将此模板提供给其他人,然后他们可以添加或删除项目必要.我试图弄清楚我是否可以某种方式使用一个li元素来做到这一点,但我还没有找到办法.有没有人有任何想法可以帮助我？
像这样在 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');
});
});
您可以在这里观看现场小提琴演示。（要进行测试，只需更改 body 元素的 id 并按运行即可。）
编辑：与 Cody Grays 的方法相比，此方法的好处是，在添加、删除或编辑菜单项时，每次更改 HTML 时都不需要修改 css。另一方面它使用 jQuery。但是，如果您想要纯 css 解决方案，只需删除 jQuery 和 body 元素的 id，然后根据特定页面直接将 .active 类应用于特定链接（类似于 jackJoe 的建议）。
如果您必须使用元素，则可以轻松修改它<li>。