• 代理加盟 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

      責任編輯:秀站網
      广东十一选五专家计划