导航中当前页的活动状态

<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>



你可能感兴趣的:(导航中当前页的活动状态)