頁面跳轉選中對應的導航

時間 2019-12-05

標籤頁面選中對應導航简体版

原文原文鏈接

前端在作一個網站的時候，一般會有不一樣的導航，點擊跳轉到對應的頁面上，這時候就須要給對應頁面的導航加一個選中狀態，如圖：
html

這是一個有首頁，seo優化，娛樂，三個頁面組成的一個導航。前端

實現方式，利用location.href獲取當前路徑，對它和當前的<a href="a.html"</a> href的值進行對比，把當前的頁面的導航選中。優化

<body>
        <ul class="menu" id="menu">  
        <li><a href="a.html">首頁</a></li>  
        <li><a href="b.html">SEO優化</a></li>  
        <li><a href="c.html">生活娛樂</a></li>  
        </ul>  
        <p>aaaaaaa</p> 
    </body> 
        <script>
            var urlstr = location.href; 
            var urlstatus = false;
            $("#menu a").each(function() {
              if((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!="") {  
                    $(this).addClass('cur'); 
                    urlstatus = true;
                }
                else {
                    $(this).removeClass('cur');
                }
            });
            if (!urlstatus) {
                $("#menu a").eq(0).addClass('cur');
            }
    </script>

相關標籤/搜索