EBM84 EBM84 - 21 days ago 8
jQuery Question

Next button in tabbed box

I have a tabbed box that I am trying to build a "next" button for to move through each tab. It works except for the active state on the tab buttons do not change when hitting "next". The first tab stays highlighted no matter what tab I'm on. Please see a sample here: http://codepen.io/EBM84/pen/VmjPRQ

Any help is appreciated. Thank you!

<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

To expand on Luke Beckers code - you could remove active classes before:

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

I forked your codepen to provide an example - http://codepen.io/ad-kemp/pen/qqNmJE

Hope this helps.