欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

JQ/JS 获取当前栏目URL 并且高亮显示

(元素模板) / 2017-10-12 11:22
如何使用JS或者JQ来让当前栏目高亮显示呢?
元素模板为您解答:
html代码:

<p class="nav">
        <ul>
            <li><a href="index.html">首 页</a></li>
            <li><a href="b.html">专家观点</a></li>
            <li><a href="c.html">课题研讨</a></li>
            <li><a href="d.html">研究报告</a></li>
        </ul>
</p>


JQ代码(记得先载入JQ库):

//除了首页外当前URL对当前栏目高亮突出显示
    $(".nav li a:not(:first)").each(function(){
        $this = $(this);
        if($this[0].href==String(window.location)){
            $this.parent().addClass("selected");
        }    
    });
//当前URL对当前栏目高亮突出显示
    $(".sidenav li a").each(function(){
        $this = $(this);
        if($this[0].href==String(window.location)){
            $this.parent().addClass("selected");
        }    
    });


JS代码:

//js 当前URL对当前栏目高亮突出显示
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
    var links = myNav[i].getAttribute("href");
    var myURL = document.location.href;
    if(myURL.indexOf(links) != -1){
        myNav[i].parentNode.className="selected";
    }
}

Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com