Jquery tabs keep tab open that is subid in url

Question

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 transports me to the first tab open, so you have to keep clicking to the second tab to view the new content. My question is how can i make it so that when the user clicks the next page in the pagination, the content is refreshed but the same tab is left open.

My plan on how to incorporate this into my current code is to use the url mail.php?page=2&tid=2

Where the page=2 is reference for the pagination that works fine but i want the tid (tab id) to make it so that that tab is the open one.

Here is the javascript for the tabs you might recognise it

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});

And the html for the tabs (had to comment out for the lists)

//<div id="tabsX">   <div id="tabContent">   <ul class="tabs">
   // <!--<li><a id="all" href="#all" class="all">All</a></li>-->
   // <li><a href="#inbox" class="inbox"></a></li>
   // <li><a href="#outbox" class="outbox"></a></li>
   // <li><a href="#compose" class="compose"></a></li>
    //<li><a href="#trash" class="trash"></a></li>
   // 

   // </ul>

AND the html for the tab content (only showing one as an example with no content as there will be too much to show)

<div id="inbox" class="tab_content">
      <div id="inbox_header" style="display:table-cell; vertical-align:middle">
      <!---content--->          

      </div><!---end inbox_content--->



</div><!---end inbox--->

I would really appreciate any help as i can't seem to find any solutions for myself

Answer 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

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