实现当前页面导航/连接文本高亮的方法

这段时间里，几乎疯狂地痴迷于模板的制作，在做一个页面模板时想要实现wiki导航文本高亮，就去网上找这方面的教程，在天兴工作室的官网找到了相关的教程并作了修改，现在把这个实现当前页面导航或连接文本高亮的方法分享给大家，希望对您有用。
通过简单的JS就可以实现导航或连接文本的高亮效果，此方法非常的万能，几乎支持所有的页面(首页、列表页、内容页、单页面等等)，适用性非常好。

1、JS代码：

<script>
$(function(){
    var surl = location.href;
    $("#cuinew-nav ul li a").each(function() {
        if ($(this).attr("href")==surl) $(this).parent().addClass("on")
    });
});
</script>

上面JS代码解释：遍历导航<a>标签的url，查找导航栏里看有哪个<a>标签与url是一样的，如果一样则给这个<a>标签所在的<li>标签加一个class属性为”on”的样式。

2、HTML代码

举例html代码部分可以这写：

<div id="cuinew-nav"><!-- 引用JS的类属性 -->
    <ul>
        <li><a href="https://cuinew.com/xx01.html">pcb理论基础测试文章004</a></li>
        <li><a href="https://cuinew.com/xx02.html">pcb理论基础测试文章004</a></li>
        <li><a href="https://cuinew.com/xx03.html">pcb理论基础测试文章004</a></li>
    <ul>
<div>

3、给高亮部分加CSS样式

这里给文本加个红色样式，可自定义修改样式

#cuinew-nav ul li.on a{color:red;}

4、引入样式和JS

最后把css样式和JS引入所在的html代码内，js代码可以</head>标签前面或</body>标签前面添加都可以。