1 <style> 2 .active { 3 color: red; 4 } 5 </style> 6 //html代码 7 <ul id="tab2"> 8 <li><a href="http://www.cnblogs.com/index.html">首页</a></li> 9 <li><a href="http://www.cnblogs.com/news.html">新闻</a></li> 10 <li><a href="http://www.cnblogs.com/about.html">关于</a></li> 11 <li><a href="http://www.cnblogs.com/job.html">工作</a></li> 12 <li><a href="http://www.cnblogs.com/ad.html">广告</a></li> 13 <li><a href="http://www.cnblogs.com/contactus.html">联系我们</a></li> 14 </ul> 15 //jq代码 16 <script> 17 $(function () { 18 window.onload = function () {
20 var $tDiv = $("#tab2"), 21 $links = $tDiv.find("a"), 22 index = 0,//默认第一个菜单项 23 urls = location.href.split('?')[0].split('/');//取得"?"以前的所以"/"截止的所有字符串 24 for (var j = urls.length-1; j > 0; j--) { 25 if (urls[j]!="index.html") {//判断改字符串是否是"index.html",如果是则返回,如果不是则执行循环 26 for (var i =0;i<$links.length; i++) {//循环底部导航栏li里面的a 27 if ($links[i].href.toLocaleLowerCase().indexOf(urls[j]) != -1) { 28 index = i; 29 $tDiv.find("li:eq(" + index + ")").addClass("active"); 30 return; 31 } 32 } 33 } 34 } 35 } 36 }) 37 </script>
点击的事件是超链接a的链接地址触发,主要需要实现的步骤是:
1.在页面正在加载的时候同时执行js脚本,主要利用的是window.onload()
2.获取到页面的链接的地址,通过对localhost的地址进行split切割后获取一个数组
3.跟其点击的超链接的链接地址做相应的比较,通过indexOf获取位置的判断来参看是否是该超链接的链接地址
4.找到该链接所属的超链的位置,加上相应的class类名