jQuery的添加和刪除菜單

Question

我新手階級jQuery中，我有這樣的HTML代碼菜單：

<nav> 
    <ul class="navtab"> 
     <li class='home selected'><a href='index.php'>Home</a></li> 
     <li class='about'><a href='company.php'>About</a></li> 
    </ul> 
</nav> 

這是jQuery代碼：

$(".navtab li.about").click(function(){ 
    $('.navtab li.home').removeClass('selected'); 
    $('.navtab li.about').addClass('selected'); 
}); 

，這我的CSS：

nav ul.navtab li.selected a{ 
    color: #fff; 
    background-color: #575757; 
} 

當選擇了頁面加載標籤回家。當我點擊關於選項卡時，我想刪除在選項卡主頁上選擇的類，並添加關於選項卡選擇的類。哪裏有問題？？

在此先感謝。法比奧

Answer 1

使用removeClass('home.selected')代替removeClass('selected');也$('.navtab li.home')將$('.navtab li.home.selected')

Live Demo

$("nav li.about").click(function(){ 
    $('nav li.home.selected').removeClass('home selected');  
    $('nav li.about').addClass('selected'); 
}); 

Answer 2

如果你想突出選定的部分，你必須做服務器端。

如果您在點擊鏈接時遇到類客戶端，頁面將被重新載入，並且jQuery回調將不起作用。

Answer 3

如果你是加載在客戶端頁面做到這一點，而不是：

$(function(){ 

    $(".navtab>li").click(function(){ 
     $(this).addClass('selected').siblings().removeClass('selected'); 
    }); 

}); 

點擊任何列表項時，該工作。

如果您要在服務器端加載新頁面，則需要設置所選的類服務器端。

Answer 4

您可以使用「數據類型=‘’」屬性或只使用一個名稱屬性來管理這個菜單的開啓狀態：

<nav> 
<ul class="navtab"> 
<li class='home selected' id="homepage" name="nav_item"><a href='#'>Home</a></li> 
<li class='about' id="company" name="nav_item"><a href='#'>About</a></li> 
</ul> 
</nav>​ 

然後這裏是jQuery的：

$("[name='nav_item']").click(function(){ 
$("[name='nav_item']").removeClass('selected'); 
$(this).addClass('selected'); 
});​ 

jQuery的刪除「選擇」類的所有實例被點擊一個導航項目時，然後添加「選擇」類被點擊的鏈接。讓我知道這是否會爲你工作...我做了一個jsFiddle它here。

如果您願意，您可以使用其他事物的ID。這看起來像是一種更高效/更乾淨的方式。

這將工作，只要你不刷新頁面...否則用你的後端代碼（PHP，JSP等）來管理開啓狀態。

PHP例子：

<?php 
if (isset($_GET['page']) && $_GET['page'] == 'homepage'){ 
    $selected_link = 'class="selected"'; //set the class if page is homepage 
} else $selected_link = ''; //empty, will not throw and error 
?> 

然後你的鏈接：

<li class='home' id="homepage" <?php echo $selected_link;?>>