選項卡中的下一個按鈕

Question

我有一個選項卡式框，我正在嘗試構建一個「下一步」按鈕以在每個選項卡中移動。除了在選項卡上的活動狀態按鈕在按下「下一個」按鈕時不會更改。無論我選擇哪個標籤，第一個標籤都會突出顯示。請看這裏的示例：http://codepen.io/EBM84/pen/VmjPRQ

任何幫助表示讚賞。謝謝！

<div class="tabs"> 
    <ul class="tab-links"> 
    <li class="active"><a href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
    <li><a href="#tab4">Tab 4</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="tab1" class="tab active"> 
     <h4>Tab 1</h4> 
     <ul class="tab-links"> 
     <li class="active"> 
      <a href="#tab2" role="button">next ></a> 
     </li> 
     </ul> 
    </div> 

    <div id="tab2" class="tab"> 
     <h4>Tab 2</h4> 
     <ul class="tab-links"> 
     <li> 
      <a href="#tab3" role="button">next ></a> 
     </li> 
     </ul> 
    </div> 

    <div id="tab3" class="tab"> 
     <h4>Tab 3</h4> 
     <ul class="tab-links"> 
     <li> 
      <a href="#tab4" role="button">next ></a> 
     </li> 
     </ul> 
    </div> 

    <div id="tab4" class="tab"> 
     <h4>Tab 4</h4> 
    </div> 

    </div> 
</div> 

Answer 1

要擴大盧克貝格爾代碼 - 你可以之前刪除活動類：

jQuery('.tab-links li').removeClass('active'); 
jQuery('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active'); 

我叉你codepen提供一個例子 - http://codepen.io/ad-kemp/pen/qqNmJE

希望這有助於。

Answer 2

要讓下一個標籤突出顯示，您需要這一點代碼。

jQuery('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active');

您仍然需要獲得一個選項卡不被「激活」，但希望這可以讓你在正確的方向前進。

Answer 3

這是我的解決方案，帶有NEXT和PREV按鈕。希望能幫助到你 ：）。

jQuery(document).ready(function() { 
 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
 
     var currentAttrValue = jQuery(this).attr('href'); 
 
    
 
     // Show/Hide Tabs 
 
     jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 
 
    
 
     // Change/remove current tab to active 
 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
 
    
 
     e.preventDefault(); 
 
    }); 
 
    
 
     
 
    jQuery('.nextButton').on('click', function() { 
 
     
 
    var $activeTab = $('.tab-links li.active'); 
 
\t 
 
\t var $wrapper = jQuery(this).closest('.tabs'); 
 
    var indexActive = $wrapper.find('li.active').index(); 
 
    $wrapper.find('li').eq(indexActive + 1).find('a').click(); 
 
}); 
 
    
 
    jQuery('.prevButton').on('click', function() { 
 
     
 
    var $activeTab = $('.tab-links li.active'); 
 
\t 
 
\t var $wrapper = jQuery(this).closest('.tabs'); 
 
    var indexActive = $wrapper.find('li.active').index(); 
 
    $wrapper.find('li').eq(indexActive - 1).find('a').click(); 
 
}); 
 
    
 
});

.tabs { 
 
    width:100%; 
 
    display:inline-block; 
 
    } 
 

 
    .tabs h4 { 
 
    color: #00447c; 
 
    margin: 5px 0 15px 0; 
 
    display: inline-block; 
 
    } 
 
    
 
    .tab-links:after { 
 
    display:block; 
 
    clear:both; 
 
    content:''; 
 
    } 
 

 
    .tab-links { 
 
    padding: 0; 
 
    margin: 10px 0 0 0; 
 
    position: relative; 
 
    top: 2px; 
 
    } 
 

 
    .tab-links li { 
 
    margin:0px 5px 0 0; 
 
    float:left; 
 
    padding-top: 2px; 
 
    list-style:none; 
 
    } 
 

 
    .tab-links a { 
 
    padding:9px 8px 6px; 
 
    display:inline-block; 
 
    background: #c7d8e8; 
 
    border: 2px solid #c7d8e8; 
 
    border-bottom: 3px solid #c7d8e8; 
 
    font-size: 10.5px; 
 
    font-weight:600; 
 
    color:#00447c; 
 
    transition:all linear 0.15s; 
 
    } 
 

 
    .tab-links a:hover { 
 
    background: #a7cce5; 
 
    text-decoration:none; 
 
    border: 2px solid #a7cce5; 
 
    border-bottom: 3px solid #a7cce5; 
 
    color: #ee3124; 
 
    } 
 

 
    li.active a, li.active a:hover { 
 
    background:#fff; 
 
    height: 16px; 
 
    border-bottom: none; 
 
    color: #ee3124; 
 
    } 
 

 
    .tab-content, .uploaded-documents-container { 
 
    padding:15px; 
 
    border-radius:3px; 
 
    border: 2px solid #c7d8e8; 
 
    background:#fff; 
 
    font-size: .95em; 
 
    } 
 

 
    .tab-content-scroll { 
 
    max-height: 375px; 
 
    min-height: 375px; 
 
    max-width: 1100px; 
 
    min-width: 450px; 
 
    overflow: auto; 
 
    clear:both; 
 
    } 
 

 
    .tab-content-scroll-home { 
 
    min-height: 135px; 
 
    } 
 

 
    .button-bar-scroll { 
 
    min-height: 235px; 
 
    } 
 

 
    .tab-content-scroll>p { 
 
    margin-top: 0; 
 
    padding-right: 12px; 
 
    } 
 

 
    .tab-content a { 
 
    margin-top: 10px; 
 
    color: #00447c; 
 
    } 
 

 
    .tab { 
 
    display:none; 
 
    } 
 

 
    .tab.active { 
 
    display:block; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="tabs"> 
 
    <ul class="tab-links"> 
 
     <li class="active"><a href="#tab1">Tab #1</a></li> 
 
     <li><a href="#tab2">Tab #2</a></li> 
 
     <li><a href="#tab3">Tab #3</a></li> 
 
     <li><a href="#tab4">Tab #4</a></li> 
 
    </ul> 
 
    
 
    <div class="tab-content"> 
 
     <div id="tab1" class="tab active"> 
 
      <h4>Tab 1</h4> 
 
      <ul class="tab-links"> 
 
     <li> 
 
\t \t <a href="#next_tab2" class="nextButton">Next</a> 
 
\t \t </li> 
 
\t </ul> 
 
     </div> 
 
    
 
     <div id="tab2" class="tab"> 
 
     <h4>Tab 2</h4> 
 
     <ul class="tab-links"> 
 
     <li> 
 
      <a href="#back_tab1" class="prevButton">Prev</a> 
 
\t \t <a href="#next_tab2" class="nextButton">Next</a> 
 
\t \t </li> 
 
\t </ul> 
 
     </div> 
 
    
 
     <div id="tab3" class="tab"> 
 
     <h4>Tab 3</h4> 
 
     <ul class="tab-links"> 
 
     \t <li> 
 
      <a href="#back_tab1" class="prevButton">Prev</a> 
 
\t \t <a href="#next_tab2" class="nextButton">Next</a> 
 
\t \t </li> 
 
\t </ul> 
 
     </div> 
 
    
 
     <div id="tab4" class="tab"> 
 
     \t <h4>Tab 4</h4> 
 
     \t <ul class="tab-links"> 
 
     \t <li> 
 
      <a href="#back_tab1" class="prevButton">Prev</a> 
 
     </li> 
 
    </ul> 
 
     </div> 
 
    </div> 
 
</div>