巅峰霸主 > 代码分享 > 源代码分享 >

js实现激活当前导航按钮高亮显示

时间:2021-03-29 06:30:11  来源:巅峰霸主网  作者:Alice_666 点击:
摘要:如何实现点击激活当前导航上的某一个按钮时,该按钮高亮显示?使用HTML+JavaScript+css代码来实现比较方便,下面是JS相关代码……

首先写html代码结构

<ul id="navC">
    <li><a href="/"  rel="nofollow" title="首页">首页</a></li>
    <li><a href="/"  rel="nofollow" title="导航一">导航一</a></li>
    <li><a href="/"  rel="nofollow" title="导航二">导航二</a></li>
</ul>

写点击后要高亮的颜色

<style>
.active{color:blue;}
</style>

对导航进行js控制

var navs = document.getElementById("navC").getElementsByTagName("a");
for(var i = 0; i < navs.length;  i++){
    var getLink = navs[i].getAttribute("href");
    var getUrl = document.location.href;
    if(getUrl.indexOf(getLink) != -1 && i !== 0){
        navs[i].className = "active";
        navs[0].className = "";
    }else if(getUrl.indexOf(getLink) != -1 && i == 0){
        navs[i].className = "active";
    }
}


(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部