タブ付きボックス内の次のボタン

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>