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

Question

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>

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

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?.

edited May 23 '17 at 11:57

Community

1
1

answered Sep 25 '14 at 10:36

Raymond Camden

10,661
3
34
68

score 0 · Answer 2 · answered Sep 25 '14 at 10:46

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
});

});

Would this work even though the first page is index.php and the second is enquiries.php ? — nsilva, Sep 25 '14 at 10:49

score 0 · Accepted Answer · answered Sep 25 '14 at 11:19

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.

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

3 Answers3