Jquery Tabs Keep Tab Open That Is Subid In Url

i am using jquery tabs, and trying to get pagination in each one, everything works fine however, if i click to go to the next page on say the second tab, it does it fine, but trans

Solution 1:

You can use the following function from here to catch the tid param in javascript

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Then change your code like this

var tabIndex = parseInt(getParameterByName('tid'),10);
$("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
$(".tab_content").eq(tabIndex - 1).show(); //Show first tab content 

So you full js code would be

function getParameterByName(name)
    {
      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
      var regexS = "[\\?&]" + name + "=([^&#]*)";
      var regex = new RegExp(regexS);
      var results = regex.exec(window.location.search);
      if(results == null)
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    } 
$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content

    var tabIndex = parseInt(getParameterByName('tid'),10);
    if(!tabIndex)
       tabIndex = 1;
    $("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
    $(".tab_content").eq(tabIndex - 1).show(); //Show first tab content

    //On Click Event
    //  add you onlick code here


  )};

I am adding -1 in eq because it's 0-based. Check the doc here $.eq

Solution 2:

I would suggest looking at the documentation for jquery tabs. There's a number of options that you can use. The cookie option:

$( ".selector" ).tabs({ cookie: { expires: 30 } });

Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selected option is not defined. Requires cookie plugin, which can also be found in the development-bundle>external folder from the download builder. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options (example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }. Since jQuery UI 1.7 it is also possible to define the cookie name being used via name property.

Also, you can use the selected option. This lets you specify what tab should be opened on initialization:

$( ".selector" ).tabs({ selected: 3 });

The third option is to load the content of the tab via an ajax call instead.