举例:我们希望在此页面点击“我的头像”从而加亮它的背景颜色,跟“我的爱好”的背景颜色一样。
之前:
之后:
我是这样实现的:通过判断当前url是否存在某字段,遍历字段所在的位置给加上相应的样式,我这么说可能比较难理解,看看代码吧。
html:
1 <ul class="active-title"> 2 <a href="/like"><li >兴趣爱好</li></a> 3 <a href="/head"><li>我的头像</li></a> 4 <a href="/collection"><li >我的收藏</li></a> 5 <a href="/basic"><li >基本资料</li></a> 6 <a href="/details"><li>详细资料</li></a> 7 </ul>
jq:
1 $(function($){ 2 var li=$(".active-title").children("a"); 3 //遍历所有li 4 $(".active-title").find("li").each(function(){ 5 6 var str=["like","head","collection","basic","detail"];//这里需要和<li>一一对应,顺序不能颠倒 7 var url=window.location.pathname; 8 //遍历数组 9 for(var i=0;i<str.length;i++){ 10 if(url.indexOf(str[i])>0){ 11 li.eq(i).children("li").attr("class","active");//加上样式.active 12 return; 13 } 14 } 15 }) 16 })
是不是挺简单的?有别的方法可以和博主讨论哦。
以前发过一个类似的,原理是通过点击事件切换样式,原文地址:http://www.cnblogs.com/mrcln/p/3870499.html,有点弊端,具体就不多说了,所以还是比较推荐本文的。