Tab Subad Update

Question

some time ago, I asked this jquery tab question to keep the tab open, which is a subid in the url , and you can see that I found the answer to my question, now I'm trying to change it so that every time you change tab to tab, it changes the subid of tid in the header, at the moment it just changes the tid of the variable on any tab_id, so when you click back you can open the specific one you left with, but this time I want it to update tid in the title when scrolling through tabs.

If the link to my previous answer does not appear here, this is my code

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 () { $(".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 $("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; }); }); 

Let me know if you need anything else and sorry if this is a bit confusing.

EDIT: In other words, if I add? tid = 2 in the header, it will go to the second tab, but will not be automatically updated when the tab changes

Answer 1

Attempting to change the tid parameter of the current URL using Javascript without reloading the page will NOT work. You have several options:

• Make the tab actually link to a new page instead of using JavaScript.

• Modify your script so that the tabs are actually id links:

  <li><a href="#inbox" class="inbox"></a></li>

When you click a tab, you should add #outbox or #inbox for the URL. Then, when the user clicks the back button, he should bring them to the previous URL. You will also have to change your JavaScript so that when you load a page with a link to a tab in it (i.e. Page.html # inbox), the Inbox tab is displayed.

It looks like you already have the corresponding identifiers and links in your HTML, but for some reason you are adding a click function to your <li> elements instead of your <a> elements. You have to make your <a> display:block elements so that they fill your <li> elements, and then you can add tab switching functionality instead. This will add the identifier to the URL (i.e. Page.html # inbox).

So try adding onclick functions to your links:

 $("ul.tabs li a").click(function () { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).parent().addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); //Fade in the active content });