jquery/js通过当前URL对当前栏目链接高亮显示

jquery/js通过当前URL对当前栏目链接高亮显示

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2024-05-06 17:04:11
文章简介

通过jQuery/JS技术,可实现对当前URL匹配的栏目链接自动高亮显示。这一功能提升了用户导航体验,使其能够更快速、更准确地定位到所需内容,有效提高了网页的易用性和交互性。

  • 正文开始
  • 相关阅读
  • 推荐作品

对于静态页面通过当前URL对当前栏目链接高亮显示这个技巧很多小伙伴问过墨鱼,今天放一下通用代码给小伙伴参考:

HTML代码:

<div class="nav">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="list_1.html">栏目一</a></li>
            <li><a href="list_2.html">栏目二</a></li>
            <li><a href="list_3.html">栏目三</a></li>
        </ul>
    </div>

JQ代码:

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

或者使用原生js代码:(HTML代码部分的class="nav"改成id="nav")

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";
    }
}


表单checkbox和submit互动:必须先勾选注册协议,注册按钮才可点击
« 上一篇 2024年04月19日

如本文对您有帮助,就请墨鱼抽根烟吧!