2011-06-22 40 views
1

之間的轉換我有這樣的HTML代碼jQuery。元素

<a href="#">Link</a> 
<div>Content</div> 
<a href="#">Link</a> 
<div>Content</div> 

這jQuery的

$('a').click(
function(){ 
    $("div:visible").slideUp(100), 
    $(this).next("div:hidden").slideDown(100), 
    $('a').css({"font-weight" : "normal"}), 
    $(this).css({"font-weight" : "bold"}); 
}); 

的想法是,我點擊鏈接後,下一格變爲可見。鏈接本身變成黑體。點擊另一個鏈接隱藏任何可見的div,從任何鏈接中刪除粗體,並打開新的div,並使另一個鏈接粗體。

很簡單,只有一個例外可以工作:第二次點擊同一鏈接後,我不需要它是加粗。我知道這是因爲jQuery代碼的最後一行,但無法找到其他解決方案。

謝謝!

+0

實際上是否希望鏈接在第二次點擊時從粗體變爲正常?或者只是保持大膽? – duncan

回答

0

您可以檢查當前鏈接是否已經是粗體。如果沒有,那麼就這樣做。在這種情況下

if ($(this).css("font-weight") != "bold") { 
    $(this).css({"font-weight" : "bold"}); 
} 
0

使用toggleClass()

在你的CSS

寫這個 -

.normal{"font-weight" : "normal"} 
.bold{"font-weight" : "bold"} 

在jQuery的 -

$('a').click( function(){ 

$('a.bold').removeClass('bold'); // will remove bold class from all link 

$("div:visible").slideUp(100),  
$(this).next("div:hidden").slideDown(100)  

$(this).toggleClass('normal bold') ; 

}); 
+0

圍繞類名稱列表需要引號我認爲 – duncan

+0

是啊..感謝... :) – Vivek

+0

這很酷,但在這種情況下切換不適用。當我點擊鏈接兩次它按我的需要工作。但是,如果我點擊另一個鏈接,第一個不會變成「正常」。 –

0

可以使用jQuery.data功能存儲元數據關於DOM元素。

所以你的情況,改變最後一行:

$(this).css({"font-weight" : "bold"}); 

到:

if ($(this).data('clicked') == undefined) $(this).css({"font-weight" : "bold"}); 
$(this).data('clicked', true); 

享受!

+0

很好的解決方案,但這隻能工作一次。在我第三次點擊鏈接後,它不會變得粗體。 –

+0

第二次點擊鏈接後,我可以刪除該數據嗎?我認爲這會讓它再次大膽。 –