导航着色实现原理

我们在制作网站的时候，都会看到当我们在首页的是时候,导航上“首页”和其他导航字体颜色会做一下区分，那么这个区分颜色比较醒目，例如下图效果

效果展示
当我们点击其他导航的时候，当前点击的导航字体“着色”，那么原先“着色”的导航恢复默认字体颜色或者效果。
那他到底是如何实现的呢？
我们是通过获取网址url，然后对url里面是不是包含我们导航定义的关键字或者字符，打个比方：
首页 http://www.lizi.com/index.html 或者 http://www.lizi.com //index 首页比较特殊 我们一般会放到最后
产品页面：http://www.lizi.com/product.html //关键字：product
新闻页面：http://www.lizi.com/news.html //关键字：news
关于我们页面：http://www.lizi.com/about.html //关键字：about
....
然后筛选出我们定义的字符，添加作色的样式（.current 或者 .active 或者 .hot）
注意导航的顺序，应为我们是根据导航的索引值来进行添加（.current）的
下面我们来写代码

html代码

        <ul id="nav-ul">
            <a href="/">
                <span>首页</span> 
            </a>
            <a href="/product.html">
                <span>产品</span> 
            </a>
            <a href="/news.html">
                <span>新闻</span> 
            </a>
            <a href="/about.html">
                <span>关于我们</span> 
            </a>
        </div>

js代码

            var oUrl = window.location.href,
                $nav = $("#nav-ul a");
            if(oUrl.indexOf('product')>-1){
                $nav.eq(1).addClass('current');
            }else if(oUrl.indexOf('news')>-1){
                $nav.eq(2).addClass('about');
            }else{
                $nav.eq(0).addClass('current');
            }

css 代码

.nav-ul a{
  color: #fff
}
.nav-ul a.current{
  color:blue
}

上面代码只是自己做的一个演示或者案例，具体效果根据自己的效果来制作。