我們在程序裡進行包含的文件的時候，如統一的頭部和底部，這時候統一的頭部中有一個這樣的導航，如果粗心的程序員沒有無法給目前所在的目錄或文件輸出一個高亮的類的時候，或者有時候實現起來非常麻煩的時候，能不能有一些其實的方法來實現和補救呢？
答案是肯定的，那就是JS。
但這個根據怎樣的規則給當前的這個目錄或文件實現高亮呢？
最近剛好也在項目中遇到這個問題，所以通過一番的折騰，實現了效果。
我的思路是這樣的，先找到當前的URL的路徑，然後URL中的最後的一個文件名或目錄和導航中元素的某個屬性來進行匹配，匹配成功的就加上高亮的類，把別的不是當前匹配的類的高亮樣式去掉，不成功的時候就返回到首頁這個來進行高亮。
於是就有了下面的代碼，經試驗，無論是文件或是目錄都可匹配成功：
HTML代碼：要注意“rel”
<ul class="menu" id="menu">
<li><a title="網頁教學網" 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);