• 代理?#29992;?/b> 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

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

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

    来源:未知 发布时间:2018-07-12热度:我要评论
    首先写一下html结构: div id=nav ul lia href=#1首页/a/li lia href=#2产品/a/li lia href=#3地址/a/li lia href=#4关于/a/li lia href=#5联系/a/li /ul /div 然后简单的 写一下样式: body{fon...

    首先写一下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>

    本文地址:http://www.uanl.tw/dedecms_wt/956.html

      责任编辑:秀站网

      发表评论

      评论列表(条)

        广东十一选五专家计划