首页 > 其他 > 详细

导航中当前页的活动状态

时间:2015-07-06 12:37:20      阅读:234      评论:0      收藏:0      [点我收藏+]
<style>.active{color:#f00;font-weight: bold;}</style>
<div id="nav">
	<a href="/aaa/aaa.html">aaa</a>
	<a href="/bbb/bbb.html">bbb</a>
	<a href="/ccc/ccc.html">ccc</a>
	<a href="/ddd/ddd.html">ddd</a>
	<a href="/eee/eee.html">eee</a>
	<a href="/fff/fff.html">fff</a>
	<a href="/ggg/ggg.html">ggg</a>
</div>


<script type="text/javascript" src="http://js.ql91.cn/ql91com/ql91/jquery.js"></script>

<script>
var pathname = window.location.pathname;  //这个获取当前的页面path
pathname = "/fff/fff.html";  //当前页面的path   测试用的,实际使用是注释这一行

$.each($("#nav a"),function(k,v){
    var href = $(v).attr("href");  //获取导航上的每个连接的url
    if(href.indexOf(pathname)!=-1){   //查看当前页面是否在pathname中存在
        $(v).addClass(‘active‘); //如果存在就叫上活跃的CSS
    }
});
 </script>



导航中当前页的活动状态

原文:http://my.oschina.net/tongjh/blog/475045

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!