通過多個鏈接打開/關閉課程

我似乎無法在SE上找到這個問題。我在列表中有許多鏈接。點擊鏈接時，將添加活動類。如果另一個鏈接被點擊，我希望它變爲活動狀態並且上一個活動鏈接變爲非活動狀態。通過多個鏈接打開/關閉課程

<li> 
    <div class="yearaction year1"> 
     <a href="#" class="gotoslide inactiveyear" id="year1"></a> 
    </div> 
    2007 
</li> 
<li> 
    <div class="yearaction year2"> 
     <a href="#" class="gotoslide inactiveyear" id="year2"></a> 
    </div> 
    2008 
</li> 
<li> 
    <div class="yearaction year3"> 
     <a href="#" class="gotoslide inactiveyear" id="year3"></a> 
    </div> 
    2009 
</li> 
. 
. 
.

$(".gotoslide").click(function(){ 
    $(this).toggleClass("activeyear inactiveyear"); 
});

此實現不影響到其他環節。我如何使這個切換正常工作？

來源

2014-03-30 darnen

你的代碼，作用似乎是對。你可以驗證你的控制檯是否顯示任何錯誤？ –

我不確定你是否可以用一次調用切換兩個或多個類，試試'$（this）.toggleClass（「activeyear」）。toggleClass（「inactiveyear」）;'。 – Rolice

你快到了。這將切換您點擊的鏈接上的類。也切換這些你以前在點擊一個：

$(".gotoslide").click(function(){ 
    // previously active 
    $(".activeyear").toggleClass("activeyear inactiveyear"); 
    $(this).toggleClass("activeyear inactiveyear"); 
});

來源

2014-03-30 19:22:25 blgt

這很好，但可以更短：'$（「。activeyear」）。add（this）.toggleClass（「activeyear inactiveyear」）;' – dfsq

@dfsq這是一個很好的捷徑，但會失敗兩個連續的'click'事件被髮送到同一個元素。 – blgt

謝謝你們兩人 - 這似乎確實解決了我的問題。很高興聽到我至少不是一英里遠:)謝謝你們 – darnen

您必須逐個切換它。一個很好的解決方法是將data- *附加到每個鏈接。

<a href="#" class="gotoslide inactiveyear" id="year1" data-year="1"></a> 
<a href="#" class="gotoslide inactiveyear" id="year2" data-year="2"></a>

然後

$(".gotoslide").click(function(){ 
    $(this).toggleClass("activeyear inactiveyear"); 
    var year = parseInt($(this).data('year')) - 1; 
    $('#year' + year).toggleClass("activeyear inactiveyear"); 
});

來源

2014-03-30 19:22:46 beautifulcoder

這取決於什麼是應該當您單擊兩次，你是如何設置這些類相同的目標發生了一點。我認爲，這種思路可以幫助你：

$(".gotoslide").click(function() { 
    $(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items 
    $(this).addClass("activeyear"); // add .activeyear to this specific item 
});

來源

2014-03-30 19:24:39 Genie

它不會影響其他的環節，因爲通過使用：

$(this)

你只指.gotoslide類的特定實例（一個被點擊）。

影響到所有與.gotoslide類的其他元素，是指他們：與使用.toggleClass（）方法的

$('.gotoclass')

來源

2014-03-30 19:26:27 CodeVirtuoso

你可以試試這個，只需撥動一個類（活動）。通過這種方式，您可以假設非活動狀態不具有活動類並使用CSS來相應地設置它們的樣式。這將檢查另一個活動元素（如果有的話），刪除活動類並使其自身處於活動狀態。

$(document).on('click','.gotoslide', function (e) { 
     if($('.gotoslide.active').length) { 
      $('.gotoslide.active').removeClass('active'); 
     } 
     $(this).toggleClass('active'); 
    });

來源

2014-03-30 19:31:39 xCNPx

您必須首先清理其他鏈接，然後將點擊鏈接設置爲正確的類。

除了切換類之外，更安全的方法是將類明確地設置爲removeClass和添加Class。最初設定的所有一切$（「activeYear。」）元素（推測只有一個）爲無效，然後設置點擊鏈接‘inactiveyear’

$(".gotoslide").click(function(e){ 
    e.preventDefault(); 

    $(".activeyear").removeClass("activeyear").addClass("inactiveyear"); 

    $(this).toggleClass("activeyear inactiveyear"); 
});

工作示例這裏：http://jsfiddle.net/hVLML/4/

來源

2014-03-30 19:38:31 guioconnor

通過多個鏈接打開/關閉課程

回答

相關問題