JS网页制作实例:实现导航高亮方法
我们在程序里进行包含的文件的时候，如统一的头部和底部，这时候统一的头部中有一个这样的导航，如果粗心的程序员没有无法给目前所在的目录或文件输出一个高亮的类的时候，或者有时候实现起来非常麻烦的时候，能不能有一些其实的方法来实现和补救呢？
答案是肯定的，那就是JS。
但这个根据怎样的规则给当前的这个目录或文件实现高亮呢？
最近刚好也在项目中遇到这个问题，所以通过一番的折腾，实现了效果。
我的思路是这样的，先找到当前的URL的路径，然后URL中的最后的一个文件名或目录和导航中元素的某个属性来进行匹配，匹配成功的就加上高亮的类，把别的不是当前匹配的类的高亮样式去掉，不成功的时候就返回到首页这个来进行高亮。
于是就有了下面的代码，经试验，无论是文件或是目录都可匹配成功：
HTML代码：要注意“rel”
<ul class="menu" id="menu">
<li><a title="IT教学网" href="index.html" rel="index.html">首页</li>
<li ><a title="查看 作品集 下的所有文章" href="works.html" rel="works.html">作品集</li>
<li><a title="查看 前端库 下的所有文章" href="web.html" rel="web.html">前端库</li>
</ul>
JS代码：
<script type="text/javascript">
var urlstr = location.href;
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
$(this).addClass('cur'); urlstatus = true;
} else {
$(this).removeClass('cur');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
(function(w, d, g, J) { var e = J.stringify || J.encode; d[g] = d[g] || {}; d[g]['showValidImages'] = d[g]['showValidImages'] || function() { w.postMessage(e({'msg': {'g': g, 'm':'s'}}), location.href); } })(window, document, '__huaban', JSON);