CODEWITHSUNDEEP
jqueryjquery-ui-tabs
nsilva
nsilva

Reputation: 5614

jQuery Tabs - Set active tab depending on which link is clicked

I am using jquery tabs within Wordpress as follows:-

[tab name="Compliments Form"][contact-form-7 id="158" title="Compliments Form"][/tab]
[tab name="Complaints Form"][contact-form-7 id="159" title="Complaints Form"][/tab]
[tab name="Work for us"][contact-form-7 id="160" title="Central Morley - Work Form"][/tab]
[end_tabset]

I can set the 'active' tab as follows:-

jQuery(document).ready(function() {
    jQuery('#tabs-1').tabs({ active: 1 }); // either 0, 1 or 2
});

Basically I have 3 links on the homepage that all come to this same page, I would like to somehow set the 'Active Tab' depending on which link is clicked.

Maybe I need to pass something extra from the link from the homepage so I can determine which tab I need to set active, I'm just unsure how I could achieve this so any help would be much appreciated!

Here is an example link from the homepage:-

<a id="compliments-form" href="http://www.taxileeds.com/demo/enquiries/">

    <button>Compliment Form</button>

</a>

Upvotes: 0

Views: 2498

Answers (3)

nsilva
nsilva

Reputation: 5614

Got it working as follows:-

Buttons on homepage

<a href="http://www.taxileeds.com/demo/enquiries/#compliments-form"><button>Compliments Form ›</button></a>

<a href="http://www.taxileeds.com/demo/enquiries/#complaints-form"><button>Complaints Form ›</button></a>

<a href="http://www.taxileeds.com/demo/enquiries/#work-for-us"><button>Work for Us ›</button></a>

jQuery on Enquiries Page

jQuery(document).ready(function() {

var myString = window.location.href.substring(window.location.href.lastIndexOf('#') + 1);

if (myString == 'compliments-form') {
        jQuery('#tabs-1').tabs({ active: 0 });
}
if (myString == 'complaints-form') {
        jQuery('#tabs-1').tabs({ active: 1 });
}
if (myString == 'work-for-us') {
        jQuery('#tabs-1').tabs({ active: 2 });
}

});

Basically it's taking the value after the # tag from the link in the first page, then using this value to decide which tab to set as the active one.

Upvotes: 0

Apul Gupta
Apul Gupta

Reputation: 3034

As your question states that there are 3 links:

<a id="compliments-form" href="http://www.taxileeds.com/demo/enquiries/">
    <button>Compliment Form</button>
</a>

I am assuming other two anchor as:

<a id="complaints-form" href="http://www.taxileeds.com/demo/efg/">
    <button>Compliment Form</button>
</a>

<a id="work-for-us" href="http://www.taxileeds.com/demo/cde/">
    <button>Compliment Form</button>
</a>

This javascript code will work for this case:

jQuery(document).ready(function() {
jQuery('#tabs-1').tabs({ active: 1 }); // default selected

$('#compliments-form').click(function(event){    
  event.preventDefault();
  jQuery('#tabs-1').tabs( "option", "active", 0 );
});

$('#compliments-form').click(function(event){    
  event.preventDefault();

  jQuery('#tabs-1').tabs( "option", "active", 1 ); // either 0, 1 or 2
});

$('#work-for-us').click(function(event){    
  event.preventDefault();  
  jQuery('#tabs-1').tabs( "option", "active", 2 ); // either 0, 1 or 2
});

});

Upvotes: 0

Raymond Camden
Raymond Camden

Reputation: 10857

Yes, you would need to pass a URL variable in. Let's say you pass in tab=X, where X will be 1, 2, or 3, and you will use that to set the active tab. To get the URL variable, you can simply parse the query string via JS, as desribed here: How can I get query string values in JavaScript?.

Upvotes: 1

Related Questions