码迷,mamicode.com
首页 > 其他好文 > 详细

导航中当前页的活动状态

时间:2015-07-06 12:39:09      阅读:113      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!