JS实现超链接导航菜单点击切换选中时的状态

今天在项目中需要使用到点击导航菜单切换成选中时的状态,需要切换成为不同的颜色,有点类似于导航菜单点击选中高亮的效果。

如果只是 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导航栏代码的后面。

    A+
发布日期:2022年03月27日 15:35:34  所属分类:JavaScript
最后更新时间:2022-03-27 15:48:19
付杰
  • ¥ 299.0元
  • 市场价:599.0元
  • ¥ 69.0元
  • 市场价:99.0元
  • ¥ 0.0元
  • 市场价:199.0元
  • ¥ 79.0元
  • 市场价:99.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: