如何在单页网站的导航中实现活动状态

我正在单页网站上工作。在本网站中，我希望在导航栏中将活动部分或“页面”加下划线。目前我点击链接后会显示带下划线的链接。但是，当我点击转到另一个活动的“页面”时，它会保持下划线。如何在单页网站的导航中实现活动状态

这里是导航是如何设置的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/。任何人都能想到一些解决方案吗

来源

2013-08-27 justLearning

你只是忘了添加jQuery和设置代码在DOM准备运行：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'); 
    }); 
});

，但我会建议是将类active添加到选定的链接，并在您的CSS文件中给它underline属性，以便您稍后可以在脚本中识别当前活动链接：http://jsfiddle.net/GdePr/14/

$(function(){ 
    $('#navbar a').click(function() { 
     $('#navbar a').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

CSS：

a.active{ 
     text-decoration: underline !important; 
    }

来源

2013-08-27 00:25:36 MaveRick

我希望下划线在每个部分变为活动状态时进行更改。 – justLearning

现在检查链接 – MaveRick

谢谢....完美的作品！ – justLearning

你可以尝试定义的活动状态的链接

#navbar a:active {text-decoration:underline;}

来源

2013-08-27 00:22:58 prgrmr

对不起，但这并没有帮助。 – justLearning

我不同意小牛稍稍回答。您需要将代码包装在ready()函数中。但是，要重置其他链接，我不会再跳入DOM。利用jQuery的siblings()函数。它获取与选定元素相同DOM级别的元素，然后执行指定的功能。通过这样做，您可以防止您点击的链接执行两个功能。

选择器也将采取的parent()

$(document).ready(function() { 
    $('#navbar a').on("click", function() { 
     $(this).parent().siblings().find("a").removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

此发现a的父，这将是li优势。然后，它获得li的所有兄弟，所以这不包括被点击的a的li。那么它就是那些兄弟姐妹里面的所有a。这将证明更多的是可重用的功能。

Fiddle

另外，不要使用!important。它可能会导致许多问题，你在路上

来源

2013-08-27 02:44:24

如何在单页网站的导航中实现活动状态

回答

相关问题