Updating subid through tabs

Question

a while ago i asked this question Jquery tabs keep tab open that is subid in url and you can see that i found an answer to my question, now i am trying to alter it so that each time you change from tab to tab it changes the tid subid in the header, at the moment it just changes the variable tid to whatever the tab_id is, so that when you press back, you can open the specific tab you left from, but this time i want it to update the tid in the header as you scroll through the tabs.

In case the link to my previous answer doesn't show here 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 little confusing.

EDIT: In other words at the moment if i add ?tid=2 in the header then it will go to the second tab, but it will not update it automatically when you change tab

Answer 1

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

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

2. Alter your script so that the tabs are actually id links, like so:

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

When you click a tab, #outbox or #inbox should be appended to the URL for you. Then when the user clicks the back button, it should bring them to the previous URL. You will also have to alter your JavaScript so that when the page loads w/ a link to a tab in it (i.e. page.html#inbox), then the inbox tab shows.

It seems that you already have the appropriate ids and links in your HTML, but for some reason your are adding a click function to your <li> elements instead of your <a> elements. You should make your <a> elements have display:block so that they full your <li> elements and then you can add the tab-switching functionality to them instead. This will enable the id to be appended to the URL (i.e. page.html#inbox).

So try adding the onclick functions to your links instead:

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