今天在项目中需要使用到点击导航菜单切换成选中时的状态，需要切换成为不同的颜色，有点类似于导航菜单点击选中高亮的效果。
如果只是 li标签 选项卡还好办，这次需要用到的是 a标签 超链接选项卡。因为a链接每次点击都会刷新，所以浏览器记不住点击的状态，也没法切换点击状态，由于此项目中有好多地方要用到，我们可以用以下原理去实现。
实现原理：
通常的情况下，导航菜单中的每个a标签的href链接内容肯定是不一样的。既然是这样，我们可以用打开浏览器的当前网址去和href做一个对比，如果一样，我们就用JS给一个选中的效果，其它不一样的，当然是不给了。
今天就是我这里为例子，给大家简单演示一下，我主要用的是JavaScript 原生代码。
本项目的解决方法灵感依然来源于：Layui“导航/菜单”点击URL跳转后变成选中状态 方法
具体操作如下：
html代码：
<!-- 导航栏 -->
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul id="index-nav">
<li><a href="//www.test.com/" data-id="index" title="付杰博客测试" class="current">首页</a></li>
<li><a href="//www.test.com/category.php" target="_blank" data-id="note" title="">分类目录</a></li>
<li><a href="javascript:void(0);" data-id="manual" title="参考手册">参考手册</a></li>
<li><a href="//www.test.com/commentslist" data-id="commentslist" target="_bank" title="英文文档集合">用户笔记</a></li>
<li><a href="javascript:void(0);" data-id="quiz" title="测验/考试">测验/考试</a></li>
<li><a href="//www.test.com/browser-history" target="_blank" data-id="bookmark" >本地书签</a></li>
</ul>
</div>
</div>
</div>
JavaScript原生代码实现：
由于我的这个项目的选中状态的css样式就是给了一个 class="current" ，去掉这个属性，就没有选中状态了。
<script>
//console.log(document.getElementById("index-nav").children);
var nav_length = document.getElementById("index-nav").children.length;
var current_url = document.URL;
for(var i=0; i < nav_length; i++){
console.log(i);
if(document.getElementById("index-nav").children[i].firstChild.href === current_url){
document.getElementById("index-nav").children[i].firstChild.setAttribute("class","current");
}else{
document.getElementById("index-nav").children[i].firstChild.removeAttribute("class");
//document.getElementById("index-nav").children[i].firstChild.setAttribute("class","");
}
}
</script>参数简单说明：
document.getElementById：返回对拥有指定 id 的第一个对象的引用。
document.URL：返回当前文档的URL地址。
children：返回元素的子元素的集合。
firstChild：返回元素的第一个子节点。
setAttribute：设置或者改变指定属性并指定值。
removeAttribute： 从元素中删除指定的属性。
总结：
由于每个人的html代码略有不同，你可能直接拿我的JavaScript 原生代码或许不能正常使用，你还要根据你的自己项目来做相应的变通，这个我相信作为程序开发者大家都懂的。
注意：
JS代码一定要放在html导航栏代码的后面。
