「當前」標籤將不會顯示在「所有選項卡」被切換

Question

Fiddle

我試圖創建一個jQuery腳本允許出現兩個事件：

1. 創建選項卡式內容，其中當頁面加載
2. 創建只有第一個選項卡的內容（.current）顯示「顯示所有標籤內容」按鈕（.toggle_tabs），其切換的所有標籤內容的可視性

代碼成功地標籤每個選項卡的內容;問題是這樣的：

• 如果我加載頁面，然後單擊.toggle_tabs，具有標籤類.current當第一次加載頁面是唯一的標籤，其內容是不可見的
• 如果我加載頁面，單擊任意一個選項卡，然後單擊.toggle_tabs，將顯示所有選項卡式內容。

如何在點擊.toggle_tabs時看到所有選項卡式內容，而無需先單擊其中一個選項卡？

當前代碼：

/* jQuery */ 

$('#hb_container div.tab-link').click(function() { 
    var tab_id = $(this).data('tab'); 
    $('#hb_container div').removeClass('current'); 
    $('.tab-content').removeClass('current').removeClass('active'); 
    $(this).addClass('current'); 
    $("#" + tab_id).addClass('current').addClass('active'); 
}); 
$('.toggle_tabs').click(function() { 
    $('.tab-content').each(function() { 
     if (($(this).hasClass('current')) && ($(this).hasClass('active') === false)) { 
      $(this).removeClass('current'); 
     } else { 
      $(this).addClass('current'); 
     } 
    }); 
}); 

/* Tabs */ 

    <div id="hb_container"> 
     <div class="tab-link current" data-tab="tab-1"><div class="tab-link-inner">Job<br>Info</div></div> 
     <div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">Asb.<br>By</div></div> 
     <div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">Apl.<br>No.</div></div> 
     <div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">Struc.<br>Eng.</div></div> 
    </div> 

/* Tabbed content */ 

<div id="tab-1" class="tab-content current" style="margin-top: 24px"> 
    <div class="tab-content-title">Attachment Upload</div> 
    <div class="single_col_container"> 
     <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> 
    [input] 
     </div> 
    </div> 
</div> 

<div id="tab-2" class="tab-content" style="margin-top: 24px"> 
    <div class="tab-content-title">Job Info</div> 
    <div class="single_col_container"> 
     <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"> 
    [input] 
     </div> 
    </div> 
</div> 



/* CSS */ 

#hb_container { 
    margin: 8px 0 8px 8px; 
    width: 984px; 
    height: 54px; 
} 
    .tab-content { 
     display: none; 
    } 

    .tab-content.current { 
     display: inherit; 
    } 

    .tab-link { 
     background: #222; 
     color: #ddd; 
     cursor: pointer; 
     float: left; 
     font-family: Roboto; 
     font-size: 12px; 
     font-weight: bold; 
     letter-spacing: 1px; 
     line-height: 14px; 
     margin: 0 8px 0 0; 
     width: 54px !important; 
     height: 54px; 
    } 

     .tab-link:hover { 
      background: #181818; 
      color: #ffcc00; 
     } 

     .tab-link-inner { 
      margin-top: 11px; 
     } 

Answer 1

我建議存儲，可判斷標籤都被切換或不作爲toggling這裏做一個狀態：

// The tabs are not toggling by default 
var toggling = false; 
$('#toggle_tabs').click(function() { 
    if (toggling) { 
     // If they are being toggled, remove the current class for all tabs except the one that is active 
     $('.tab-content').each(function() { 
      if (!$(this).hasClass('active')) { 
       $(this).removeClass('current'); 
      } 
     }); 

     toggling = false; 
    } else { 
     // If they aren't being toggled, add the current class for all tabs 
     $('.tab-content').each(function() { 
      $(this).addClass('current'); 
     }); 

     toggling = true; 
    } 
}); 

而在HTML中，active類添加到您的第一個標籤。

<div id="tab-1" class="tab-content current active" style="margin-top: 24px"> 

Updated fiddle here.

Answer 2

理想的情況下，切換按鈕將顯示在不影響各個選項卡的「選中」狀態的所有內容。我建議在包裝容器的標籤，並觸發該元素的一個類，而不是對各個選項卡中的類搞亂：

<div id="hb_wrapper"> 
    <div id="tab-1"> 
    ... 
    </div> 
    ... 
    <div id="tab-N"> 
    ... 
    </div> 
</div> 

點擊肘杆會觸發一個show-all類：

$('#toggle_tabs').click(function() { 
    $('#hb_wrapper').toggleClass('show-all'); 
}); 

並在CSS，你將會覆蓋show-all的display屬性：

.show-all .tab-content { 
    display: inherit; 
} 

Updated Fiddle