將選項卡的值重置爲默認的css狀態

如果單擊另一個選項卡，我有一個關於重置活動選項卡類的狀態的問題。下面的代碼按預期切換類，以顯示不同的標籤顏色圖像，但如果我點擊另一個標籤，則兩個標籤都顯示爲活動狀態。將選項卡的值重置爲默認的css狀態

我的問題是我需要添加什麼來重置活動選項卡回到其默認狀態，並激活新點擊的選項卡到活動狀態。

$(document).ready(function(){ 
    $('.slide-out').each(function(){ 
     var $this = $(this); 
     var defaultPos = roundValue($this.css('left')); 

     $('.tab', $this).on('click', function(){ 
      var tab = $(this);                    
      var goTo = tab.attr('slide-To'); 
      var currentPos = roundValue($this.css('left')); 

      if(goTo == currentPos){ 
       goTo = defaultPos; 
      }          

      $this.animate({'left': goTo}, 'slow'); 
      $(this).toggleClass('handle2-selected');          
     }); 
    }); 
});

來源

2012-07-04 user1502434

從所有選項卡中刪除選定的班級，然後再將其應用到您需要的班級。 –

您應該像切換下一個選項卡一樣切換上一個選項卡上的類。或者你可以在開始動畫之前編寫我的代碼。

$('.tab').removeClass('handle2-selected');

來源

2012-07-04 20:48:11

相反toggleClass的，你應該從你的標籤移除handle2選擇類，然後將其應用到當前的（這個）

喜歡的東西

$('.tab').removeClass('handle2-selected'); 
tab.addClass('handle2-selected');

更新：

刪除活動選項卡上的活動類別

// check if current clicked tab has the active class or not 
if(tab.hasClass('handle2-selected')) { 
    // if current clicked tab has active class, remove it 
    tab.removeClass('handle2-selected'); 
    // add other codes for this state if needed 
} else { 
    // if not then do the normal removing and adding to current tab 
    $('.tab').removeClass('handle2-selected'); 
    tab.addClass('handle2-selected'); 
}

來源

2012-07-04 20:47:29 Huangism

如果我單擊該選項卡，則按預期方式工作，轉爲紅色，如果我單擊其他選項卡，則prev選項卡將切換回默認值，新選項卡將獲得'handle2選定'類。我唯一的問題是，如果我想要活動選項卡回到默認狀態，它保持活動狀態。它只會刪除類，如果我點擊其他選項卡。我需要添加什麼，這樣如果再次單擊活動選項卡，它也會刪除選定的類。我認爲在動畫之前添加刪除會起到訣竅的作用。 – user1502434

@ user1502434爲什麼要刪除活動選項卡上的活動類？這不會破壞目的嗎？如果你真的想刪除活動選項卡上的活動類，單擊時，你只需要檢查當前選項卡上的類，如果類存在刪除它，我會更新我的答案 – Huangism

這些垂直滑動選項卡顯示不同的內容基於它們是否向左或向右滑動，但所有標籤和內容div都有默認位置。頂部選項卡被點擊並向右滑動，添加該類以顯示該選項卡爲活動狀態。如果我再次單擊相同的選項卡，則會向左滑動到默認位置，並且該類應該被刪除。到目前爲止，類被刪除的唯一方法是如果我點擊另一個選項卡，我需要在2個事件中刪除活動選項卡類。如果我點擊活動，如果我點擊任何其他選項卡。 – user1502434

將選項卡的值重置爲默認的css狀態

回答

相關問題