女神猫女王

代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 常見問題 >

織夢高亮顯示當前導航條的javascript

來源:本站原創 發布時間:2018-07-12 20:15:01熱度:我要評論(0

免費下載,無需注冊無需充值

首先寫一下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.qksux.club/dedecms_wt/956.html

    發表評論

    評論列表(條)

      女神猫女王 2165147107109597882376857654216901679181761537914515711264965776589893287931395306940181342319914 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();