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

发布时间:2020-02-21 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery – 如何在单页网站的导航中实现活动状态脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在一个单页网站上工作.在本网站中,我希望在导航栏中为活动部分或“页面”加下划线.目前我有点击后显示下划线的链接.但是,当我点击转到另一个活动的“页面”时,它会保持下划线.

以下是在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; 
    }

总结

以上是脚本之家为你收集整理的jquery – 如何在单页网站的导航中实现活动状态全部内容,希望文章能够帮你解决jquery – 如何在单页网站的导航中实现活动状态所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: