I have a standard tabbing section to divide content into separate tabs, similar to the jQuery tabs.
My problem, how can I keep the active tab open when a user comes back to the page without them needing to re-select the tab.
Is this a cookie issue?
How can I modify the code below?
$(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;
});
});
Right now, the tabs are already linked to their respective content with a fragment identifier (href=“#welcome”). When a tab is clicked, you’re currently cancelling the default action by returning false from the event listener.
If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there’s a fragment identifier, and load the appropriate content if there is.
I reworked your code because I can’t help myself from messing with things, but the only two real changes I made are:
Allow the default action when the tab is clicked.
When the page is loaded, check for a fragment identifier to see which page should be loaded.
(Also: In your original code, the “active” class was added to <li> elements. In my rewrite, it gets added to the <a> instead. Just a heads up.)
Here’s the updated jQuery code:
$(document).ready(function() {
var $tabs = $('.tabs'),
$tabsA = $tabs.find('a'),
$tabsC = $('.tab_content'),
start = window.location.hash || '#welcome';
function deactivate() {
$tabsA.removeClass('active');
$tabsC.hide();
}
function activate(href) {
$tabsA.filter('[href=' + href + ']').addClass('active');
$(href).fadeIn();
}
function clicked(e) {
var href = $(e.target).attr('href');
deactivate();
activate(href);
}
deactivate();
activate(start);
$tabs.on('click', 'a', clicked);
});
I don’t like messing with cookies if I don’t have to, but this technique isn’t perfect: Because the user is actually following the link, the browser will try to scroll down so that the content displays at the top of the window.
I’m with Paul, there are better (and easier?) ways without js (for peeps without Javascript enabled).
Otherwise, what aufshebung did would work. However, that won’t work if the user clicks the backbutton because document.ready() doesn’t get (re)executed on back/forward. For that, you’ll need to look into a solution like Ben Almans BBQ combined with aufshebung solution.
By the way, how do you guys highlight javascript code?
I’ve tried [javascript ], [JavaScript ] , and [js ]
I understand what your saying though have a couple of issues with what you suggest.
I don’t want the address bar to reflect what tab is active, I’d like to keep the URL clean just referencing the one page with the detection/cookie code in the background, if possible. I also have a FB like button on a number of sites which treats these as different pages if I remove the default action.
The reason I’ve added active to <li> is because I need more control over the styling and need to style both the <li> & <a> to get the desired effect.
Thanks Paul
I’m already using this CSS technique on some main navigation’s and works well, not to concerned about the styling at present.
I really need to keep the tab open once somebody clicks back in the browser or links back to that same page, maybe a 24hr cookie?
Hope this makes sense.
Appreciate your suggestions and feedback.
Does the tab on the current page change based on the previous page? If yes, then a cookie is useful to recording that state-based information.
If instead though the tab on current page (such as the about page) is always the same tab, then it should be that page that determines the active tab.
It doesn’t have to be done based on the URL. With the navigation and the CSS being already in place, you can just manually set the body identifier on the about page:
<body id="about">
and your job is done.
Don’t make the task more complex than it needs to be to get the job done well.
Does the tab on the current page change based on the previous page?
Not at present, but this will be my next step, to link directly to a tab from another page.
I still think your getting the wrong idea of what is needed Paul.
Ok, example.
I have 3 pages: home, about, company.
Home and about have no tabs but the company page has 3 tabs as above.
Say for example, I’m currently on the company page and viewing the second tab, I then follow a link from this tab to the home page.
But when I click back in the browser, the tabs have reset to the welcome tab, I would like the second tab I was just viewing to still be in active.
Yes that makes sense, so you will want then to record the the state of that menu structure in to a cookie for that page, so that it can be recreated later on.
That could be as simple as recording which menus are currently open, so that when you return back to the page you can start when them all closed, and then open the ones that are retrieved from the cookie.
so that it can be recreated later on
Recreated and remembered, just so the user doesn’t have to keep clicking back to the tab they where currently looking at.
How can we set this up with the code we already have a above?
The way that this sort of thing is done, is whenever the user changes a part of the menu structure, you loop through the menu for the open items and update the cookie with that information.
When the page loads, you start with closed menu items, then get the cookie and use that info to open up the required menu items.
Here are the cookie handling functions that seem to work the best, to create, read, and erase cookies.
Background info on these can be found at the quirksmode page on cookies
Sure thing. If you want to record that the welcome tab is open you could set a cookie for that with:
createCookie('homepageTabs', 'welcome');
When the page first loads you might want to see if there is any cookie information about the homepage tabs, so that you can then do stuff based on that info.
var activeTab = readCookie('homepageTabs');
if (activeTab) {
// show the tab, which from earlier would be the welcome tab
}
Since you’re using jQuery though, were you aware that jQueryUI tabs uses the same technique already, to automatically remember which tab is currently open?
The “View source” link on that page shows you how that’s achieved using the tabs plugin that goes with jQueryUI.
