我有一個標準的基於ul的CSS導航菜單。我試圖使用JQuery來切換活動菜單的CSS類名稱。但是，我遇到兩個問題：使用Jquery切換css類

window.location.href永遠不會等於我的任何錨定hrefs。我切換到路徑名，但他們仍然不匹配。即使在調試器中，它們似乎也是如此。
我似乎無法從它的anchor.prev獲取li。我需要改變李的類名。

這裏的HTML：

<div id="left-content"> 
    <ul> 
    <li class="separator">Main 
     <ul> 
     <li class="active link"><a href="/main1" onclick="toggle_active_menu();">Main 1</a></li> 
     <li class="link"><a href="/main2" onclick="toggle_active_menu();">Main 2</a></li> 
     <li class="link"><a href="/main3" onclick="toggle_active_menu();">Main 3</a></li> 
     </ul> 
    </li> 
    <li class="separator">Tools 
     <ul> 
     <li class="link"><a href="/tools1" onclick="toggle_active_menu();">Tools 1</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

當點擊一個錨，它的相應的李應具備「主動聯繫」作爲類名。而其他所有的li應該重置爲「鏈接」作爲類名稱。

這裏是Jquery的的javascript：

function toggle_active_menu() { 
    $('#left-content a').each(function() { 
     /*var isActive = $(this).attr('href') == window.location.href;*/ 
     var active = this.pathname == window.location.pathname; 
     var prev = this.prev(); 
     alert("active: " + active + "\nthis.pathname: " + this.pathname + "\nwindow.location.pathname: " + window.location.pathname + "\nprev: " + prev); 
     prev.toggleClass('active', active); 
    }); 
}

我把警報在那裏幫助調試。正如我所提到的，點擊錨點的href（或路徑名）永遠不會匹配窗口的位置href（或路徑名）。 prev總是未定義的，而不是錨的李。

回答 - 最終

測試不同的答案後，我富爾德，我不得不刪除的onclick調用和調用文檔準備功能toggle_active_menu函數。在調用onclick之前，窗口位置未被更新。另外，我沒有使用toggleClass，所以我可以保留類名的順序。

function toggle_active_menu() { 
    $('#left-content ul li ul li a').each(function() { 
     var pathname = window.location.pathname == '/' ? '/main1' : window.location.pathname; 
     var active = pathname.indexOf(this.pathname) != -1; 
     if (active) { 
      $(this).parent().attr('class', 'active link'); 
     } else { 
      $(this).parent().attr('class', 'link'); 
     } 
    }); 
}

來源

2012-01-24 Edward J. Stembler

要獲得li這是a元素的父使用parent方法和toggleClass只拿CALSS切換。要比較錨點的href與window.location.href，您可以使用indexOf方法。

function toggle_active_menu() { 
    $('#left-content a').each(function() { 
     var isActive = (window.location.href.toLowerCase().indexOf($(this).attr('href')) != -1); 
     $(this).parent().toggleClass('active'); 
     alert("active: " + isActive); 
    }); 
}

來源

2012-01-24 14:56:26 ShankarSangoli

要修復才能上正確LI一個手柄來切換類，儘量

var prev = $(this).parent();

對於路徑名，如果它包含在window.location.href

嘗試使用 $(this).attr("href")和匹配它反對 window.location.href，或檢查

來源

2012-01-24 14:53:14 SpaceBison

爲您簡化版本。

$('.link').click(function(){ 
    $('.link').removeClass('active'); 
    $(this).addClass('active'); 
})

來源

2012-01-24 14:53:15

toggleClass只需要一個paramater應該

prev.toggleClass('active');

來源

2012-01-24 14:55:46 eiu165

使用Jquery切換css類

回答 - 最終

回答

相關問題