JS实现页面跳转或者刷新后保留点击添加的class样式

JS实现页面跳转或者刷新后保留点击添加的class样式

项目中遇到一个问题,点击进行页面的跳转,但是添加的class并没有成功。只是在当前的页面触发生效,进入到新的页面就会失效。经过不断的查阅,终于找到了一个完美的方法,使用url传参数,然后根据参数判断是否有必要显示class。二话不说,直接上代码。
html代码片段:

<ul class="navUl">
    			 <li class="active"><a href="../">首页</a></li>			
                 <li><a href="../tt/index.shtml">头条</a> </li>	
                 <li> <a href="../zx/index.shtml">资讯</a></li>
    			 <li><a href="../hdkd/index.shtml">活动看点</a></li> 				
                 <li><a href="../wzx/index.shtml">微资讯</a></li>  					
</ul>

JS代码片段:

$(document).ready(function(){  
        $(".navUl li a").each(function(){  
            $this = $(this);  
            if($this[0].href==String(window.location)){ 
                $(".navUl li").removeClass("active");
                $this.parent().addClass("active");  //active表示被选中效果的类名   
            } 
        });  
    }); 

这样就可以完美的解决了,希望可以帮助到大家。

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值