Jquery突出顯示活動菜單

我想讓我的網站菜單在用戶瀏覽頁面時突出顯示/激活，但下面的代碼不起作用。Jquery突出顯示活動菜單

有人可以檢查發生了什麼問題嗎？謝謝。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 

<script type="text/javascript"> 
$(function(){ 
// this will get the full URL at the address bar 
var url = window.location.href; 

// passes on every "a" tag 
$("#nav_main a").each(function() { 
    // checks if its the same on the address bar 
    if(url == (this.href)) { 
     $(this).closest("li").addClass("active"); 
    } 
}); 
}); 
</script> 

<style type="text/css"> 
.active{ 
color:#f93; 
} 
</style> 

<div id="nav_main"> 
<ul> 
    <li><a href="index.php">Home</a></li> 
    <li><a href="aboutFrontend.php">About</a></li> 
    <li><a href="subscribeFrontend.php">Subscribe</a></li> 
    <li><a href="newsFrontend.php">News</a></li> 
    <li><a href="magFrontend.php">Mag</a></li> 
    <li><a href="contactFrontend.php">Contact</a></li> 
</ul> 
</div>

來源

2013-02-26 conmen

你的條件是錯誤的，你需要使用正則表達式來檢查它 – 2013-02-26 03:42:11

這也應該工作：

<script> 
$(document).ready(function(){ 
    var url = (window.location.href).split("/").pop(); 
    $('#nav_main a[href="'+url+'"]').addClass('active'); 
}); 
</script>

來源

2013-02-26 04:29:52 earthdesigner

window.location.url會給絕對URL像http://zyx.com/<your-page>，所以你的相等條件將失敗。您需要用基於正則表達式的解決方案來替換相等性測試，該解決方案將測試位置路徑是否以菜單項的一個href結尾。

您需要更改

if(url == (this.href)) {

到

if(new RegExp('/' + this.href + '^').test(url)) {

來源

2013-02-26 03:43:44

嗯，我想你的實例和其工作對我來說。如果我將一個鏈接的URL保留爲空，那麼它將輸入該條件並應用該樣式。所以我建議你提醒網址，看看你是否得到了正確的網址。

您的代碼在的jsfiddle：Working Code

<div id="nav_main"> 
<ul> 
    <li><a href="">Home</a></li> 
    <li><a href="aboutFrontend.php">About</a></li> 
    <li><a href="subscribeFrontend.php">Subscribe</a></li> 
    <li><a href="newsFrontend.php">News</a></li> 
    <li><a href="magFrontend.php">Mag</a></li> 
    <li><a href="contactFrontend.php">Contact</a></li> 
</ul>

我只是不停地一個環節的空白。所以請檢查網址。

我也試過你的代碼。如果網址正確無誤，

來源

2013-02-26 03:53:37

這工作比接受的答案要好得多：

$(document).ready(function() { 
    $page = window.location.href; 

    if (!$page) { 
     $page = 'index.html'; 
    } 

    $('.mainNav li a').each(function() { 

     var $href = this.href; 

     if (($href == $page) || ($href == '')) { 
     $(this).parent().addClass('active'); 
     } else { 
     $(this).parent().removeClass('active'); 
     } 

    }); 
    return false; 

    });

來源

2014-11-21 08:02:13 BAR

你的代碼沒有工作的原因是因爲VAR URL = window.location的。 href將返回一個完整的url鏈接，如http://localhost/yousite/aboutFrontend.php然後你試圖匹配aboutFrontend.php 所以你這樣做：

if('http://localhost/yousite/aboutFrontend.php' === 'aboutFrontend.php') { 
    //!!This will not give you a match!! 
    }

對於它的工作使用完整的網址，您links.such作爲

A HREF = 「HTTP：//localhost/yousite/aboutFrontend.php」

最後做這樣的事情，它會工作

 //Get the current page link 
     current_page_link = document.location.href; 

     //Search your menu for a linkURL that is similar to the active pageURL 
     $(".navbar-nav a").each(function(){ 
      var link_loop = $(this).attr("href"); 
      if(link_loop === current_page_link){ 
       var found_url = $(this).attr("href"); 
       $('.navbar-nav a[href="'+found_url+'"]').addClass('active'); 
      } 
     });

來源

2015-07-20 14:44:31 daviek19

Jquery突出顯示活動菜單

回答

相關問題