我正在一个单页网站上工作.在本网站中,我希望在导航栏中为活动部分或“页面”加下划线.目前我有点击后显示下划线的链接.但是,当我点击转到另一个活动的“页面”时,它会保持下划线.
以下是在HTML中设置导航的方式：
<div id="navbar" class="center">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#music">music</a></li>
<li><a href="#videos">videos</a></li>
<li><a href="#connect">connect</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
我已经在这个jsFiddle：http://jsfiddle.net/GdePr/中编写了我的其余代码.有人能想到一些解决方案吗？
解决方法
你只是忘了添加jquery并设置代码在dom ready上运行：
http://jsfiddle.net/GdePr/8/
$(function(){
$('#navbar a').click(function () {
$('#navbar a').css('text-decoration','none');//don't forget to reset other inactive links
$(this).css('text-decoration','underline');
});
});
但我建议将活动类添加到所选链接并在CSS文件中为其添加下划线属性,以便稍后在脚本中识别当前活动链接：http://jsfiddle.net/GdePr/14/
$(function(){
$('#navbar a').click(function () {
$('#navbar a').removeClass('active');
$(this).addClass('active');
});
});
CSS：
a.active{
text-decoration: underline !important;
}
