导航高亮的写法

一般导航高亮是通过这样的方式来实现的

# via http://www.cnblogs.com/trying/p/3146202.html
// 这里对当前页面导航高亮
$(function () {
    setHover();
});
function setHover()
{
    var url = document.URL;
    var href = "";
    $("#home_nav li").each(function(){
        href = $(this).find("a").attr("href");
        var address = href.split("=")[1];
        // 这里用正则判断一下地址
        if( url.search(address)!= -1 )
        {
              $(this).addClass("active");
              return false;
        }
    });
}

这种方法比较没有效率，其实大部分的框架，比如 ThinkPHP 是可以有办法获得当前页面的一些信息的，比如 ACTION 等，所以可以通过在 CSS 中添加这些信息就可以实现了，比如:

<style>
    .__ACTION__hightlight {}
</style>

这个时候导航中就可以这么写

<nav>
    <ul>
        <li class="action1_highlight">action1</li>
        <li class="action2_highlight">action2</li>
        <li class="action3_highlight">action3</li>
        ...
    </ul>
</nav>

这样可以比较简单的实现高亮的功能。

转载于:https://my.oschina.net/wjlin/blog/509858