代理加盟

2023全新代理计划,一站式模板建站,铜牌代理低至699元送终身VIP,独立代理后台,自营贴牌。

您现在的位置: 麦站网 > 织梦大学 > 常见问题 >

织梦高亮显示当前导航条的javascript

来源:本站原创 发布时间:2018-07-12 20:15:01热度:我要评论(0

麦站模板建站平台(10年经验),服务数万家企业,固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司,专业团队,值得选择!超过1000套模板已登记版权,合规合法建站,规避版权风险!【点击获取方案】

首先写一下html结构:

<div id="nav">
    <ul>
        <li><a href="#1">首页</a></li>
        <li><a href="#2">产品</a></li>
        <li><a href="#3">地址</a></li>
        <li><a href="#4">关于</a></li>
        <li><a href="#5">联系</a></li>
    </ul>
</div>

然后简单的 写一下样式:

body{font-family: "微软雅黑";}
.active{
    background: -webkit-linear-gradient(top,red,yellow);
}
ul{float: left;width: 500px;height: 30px;background: red;line-height: 30px;}
li{list-style: none;float: left;}
a{text-align: center;line-height: 30px;display: block;color: #fff;width: 70px;text-decoration: none;}
a:hover{background: green;}

最后怎样才能高亮显示当前导航呢,js语句如下;

<script type="text/javascript">
        var myNav=document.getElementById("nav").getElementsByTagName("a");
        var currenturl = document.location.href;
        for(var i=0;i<myNav.length;i++){
            var aurl=myNav[i].getAttribute("href");
            if(currenturl.indexOf(aurl)!=-1){
                myNav[i].className="active";
                myNav[0].className="";
            }
        }
</script>

    转载请注明来源网址:https://www.xiuzhanwang.com/dedecms_wt/956.html

    发表评论

    评论列表(条)

       
      QQ在线咨询
      VIP限时特惠