G.L.P G.L.P - 3 months ago 146
jQuery Question

Easy responsive tabs custom tab activate

I'm using Easy Responsive tab LINK.. Here 1st tab is active on page load.. but i want to change my active tab to something else other than 1st tab.. I have following code:

HTML:

<div id="demoTab">
<ul class="resp-tabs-list">
<li> .... </li>
<li> .... </li>
<li> .... </li>
</ul>

<div class="resp-tabs-container">
<div> ....... </div>
<div> ....... </div>
<div> ....... </div>
</div>
</div>


Here is my demo page. i want to change the order of activated to 2nd tab. Is it posiible?

Sid Sid
Answer

You can do it dynamically like this

<ul class="resp-tabs-list">
  <li><a href="#tab1">Responsive Tab-1</a></li>
  <li><a href="#tab2">Responsive Tab-2</a></li>
  <li><a href="#tab3">Responsive Tab-3</a></li>
</ul>

Then we need to get the hash from the url and apply the correct class:

JavaScript

var hash = '#tab1',
    lis = $("ul.resp-tabs-list > li");
lis.removeClass("resp-tab-active");
$("a[href='" + hash + "']").addClass("resp-tab-active");

Js Demo: http://jsfiddle.net/HZ3F4/5/

Comments