Jquery tabs contain open tabs that are sub-URLs in the url

Question

I use jquery tabs and try to get pagination in each of them, but everything works fine, if I click to go to the next page, say on the second tab, it's all good, but it brings me to the first tab to open, so you You’ll need to go 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 paginated, the content is updated, but the same tab remains open.

My plan to include this in my current code is to use the URL mail.php?page=2&tid=2

Where page = 2 is a pagination link that works fine, but I want tid (tab id) to make this tab open.

Here is the javascript for the tabs you could recognize.

 $(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 html for tabs (had to comment out 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 html for the contents of the tab (showing only one example without 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 cannot find any solutions for myself

Answer 1

You can use the following function from here to catch the tid parameter 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 as follows

 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 will 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 to eq because it is 0-based . Check out the doc here $. Eq

Answer 2

I would suggest looking at the documentation for jquery tabs. There are several options you can use. Cookie Option:

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

Save the last selected tab in a cookie. A cookie is then used to determine the originally selected tab if the selected option is not defined. A cookie plugin is required, which can also be found in the external development-bundle> folder from the bootloader. The object must have the key / value pairs of the form that the cookie plugin expects as parameters. Available parameters (example): {expires: 7, path: '/', domain: 'jquery.com', secure: true}. Because jQuery UI 1.7, you can also determine the cookie name used by the name property.

In addition, you can use the selected option. This allows you to specify which tab should be opened during initialization:

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

The third option is to load the contents of the tab using an ajax call.