jQuery菜單活動鏈接

我想做一個jQuery的菜單，當我點擊其中一個鏈接（無需重新加載頁面）時，它會將其類更改爲「活動」，並在單擊另一個鏈接時刪除此類。jQuery菜單活動鏈接

這裏是我的代碼：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".buttons").children().("a").click(function() { 
    $(".buttons").children().toggleClass("selected").siblings().removeClass("selected"); 
    }); 
}); 
</script> 


    <ul class="buttons"> 
    <li><a class="button" href="#">Link1</a></li> 
    <li><a class="button" href="#">Link2</a></li> 
    <li><a class="button" href="#">Link3</a></li> 
    <li><a class="button" href="#">Link4</a></li> 
    </ul>

誰能告訴我爲什麼我的代碼不工作，如何解決呢？謝謝:)

來源

2010-03-26 b0nd

原代碼失敗，因爲該語法無效：

.children().("a")

其餘代碼也有一些根本的缺陷。試試這個：

$(function() { 
    $('.buttons a').click(function (event) { 
    var $target = $(event.target); 
    var $li = $target.parent(); 
    $li.addClass('selected').siblings().removeClass('selected'); 
    }); 
});

在這種修正，類selected應用於<li> - 不是一個<a> -to給你而寫CSS更好的靈活性。

來源

2010-03-26 03:54:50

這很好，謝謝:) – b0nd 2010-03-27 18:33:10

$(document).ready(function() { 
    $(".buttons a").click(function() { 
    $(".buttons a").removeClass("selected"); 
    $(this).addClass("selected"); 
    }); 
});

來源

2010-03-26 03:50:35 alex

唯一的問題是，這可能會由於競爭條件而導致不穩定的結果，在這種情況下，您無法確定addClass將在RemoveClass之後被觸發。 – jps 2010-03-26 03:56:11

@Jud你是對的，但是我已經在生產代碼中使用過它，並且從來沒有與它自己發生衝突。 – alex 2010-03-26 04:02:46

請原諒我，如果我錯了，但不是JavaScript的單線程本質意味着它會一次運行一行，在移到下一行執行之前調用任何額外的代碼（如jQuery的內部方法）？ – alex 2010-03-26 04:04:15

我會改變：

$(".buttons").children().toggleClass("selected").siblings().removeClass("selected");

到

$("this").addClass('selected').siblings().removeClass("selected");

來源

2010-03-26 03:51:42 jps

jQuery菜單活動鏈接

回答

相關問題