Simple Tabs w/ CSS & jQuery
Blog » CSS/XHTML » Simple Tabs w/ CSS & jQuerySimple Tabs w/ CSS & jQuery
July 1st, 2009
I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner.
For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tutorials out there.
Step1. Wireframe – HTML & CSS
Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions. Also keep in mind that I used generic names like “tab1″ so its easier to understand. In reality, you should be using keywords so it can semantic and also benefit you in SEO.
HTML
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>
If you have tried to create tabs before with CSS, you probably have experienced some frustration with getting the borders on the tabs correctly aligned. Below is a common problem that most people will run into.
Here is a solution I came up with that took care of this annoying issue. Check out the image below and also take a look at the CSS and its supporting comments for a better understanding.
Tabs CSS
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
Tab Content CSS
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
Step 2. Activate the Tabs – jQuery
For those who are not familiar with jQuery, check out their site for a general overview.
The following script contains comments explaining which jQuery actions are being performed.
$(document).ready(function() {
//When page loads...
$(".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 href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Conclusion
So there you have it, a nice and simple tab function with CSS and jQuery. If you have any questions, comments, or suggestions, please feel free to let me know!
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
This entry was posted on Wednesday, July 1st, 2009 at 12:18 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
I have one issue thou: sidebar is causing layout to move horizontally, i is worth mention because of impact on user experience.
Non the less i like the effect! Good work!
Thanks very much for this. Very nice attention to detail with the borders.
There is one slight downside, though I’m sure it’s easy to solve. If you’re not using JavaScript, you’re going to be stuck with an irrelevant navigation list. Perhaps the anchors could point to the tab content (#tab1, #tab2) so they break down to useful in-page navigation. Or perhaps the entire tab navigation could be added with jQuery so it doesn’t appear at all without JS?
The tabs look extremely good but only problem is that the content area jumps when we swicth tabs
Hey, nice tutorial!
I´ve just one thing to talk about… If JavaScript is off, the unordered list is viewed completely. This is nice and good for accessibility. But after clicking one tab, nothing happens. Might it be a opportunity to insert jump marks. So Users will also have an action by clicking on the tab and they do not need to scroll down by hand…
What do you think about it?
Greets Christian
Nice post. Nice and simple. Going into my jQuery bookmarks along with some of your other posts.
Thanks.
thanks alot
good tutorial , easy to implement …
Hi,
This is so nice work. So simple so useful. Thank you Soh
Nice job on this one. I’ve got to know: Is that a Hillbilly lorem ipsum generator you’re using? I’d love to use it as well; much more entertaining than random Greek.
And again,
a very useful tutorial. Please keep on doing this work for us
I already learned very much just because of your tutorials.
Christoph
This is why I learn so much more from you guys and your feed back
Thanks! I just adjusted the script + html, it should anchor down when js is disabled
@mike, haha yea I usually go to http://www.duckisland.com/GreekMachine.asp for my lorem ipsum~
Nice work!
Some people have complained about the content jumping. This will happen if the content area for a particular tab is taller than the page, which will cause the vertical scroll bar to appear. One solution to this is to float an empty div to the page that is 1px wide and 2000px tall. That way the scroll bar will be there regardless of the height of the content area.
Thanks Bob for noting that~
My solution to take care of the vertical scroll would be:
html {
overflow-y: scroll;
}
this way, the area for the scroll will be filled whether or not there is a need for one~
hii
great tut
help me plz with a problem
i want to have a lil pics with names of the tabs andddddddd
i want the name of tabs to be random like there should be different tab name n its assciated pic on first tab n selected n so on everytime theres a page visit or its refreshed
thnxxx
Thanks for the great tutorial! It’s awesome =]
Is there a way to put some text on top of the menu? right in front of contact for example, like: <- this is a tabbed menu…ya rly
thanks again =]
Does anyone know why when you use slideDown() it has this funky POP where it slows down like it’s going to stop then it just POPs all the way open?
Nice tips. I have an issue where if I have a div, etc, with a boarder on all 4 sides, the div is relative, and then I have an image inside which I make absolute and position is so that it break out of the top of the div, the top div boarder disapears in IE… do you know why that is?
@banny, I’m not sure if I’m understanding you correctly, can you please rephrase your question?
@alex you can wrap your additional text in a div (nest it inside the list item) and assign it some absolute positioning to make it stick to where you want. That might be the easiest way~
@JustGage do you have a demo I can look at?
@Utopie If I’m understanding you correctly, it may be that your content div is layered on underneath your tabs (which hides the top border). But do keep in mind in this tutorial I mentioned the what seems to be the top border of the content div, is actually the bottom border of the tab ul. Hope I’m not confusing you hehe. Take a look at the supporting images to get a visual.
nice tutorial.. let’s tray!
Hi and thx for a great script. Is there a solution to prevent the content from jumping every time the tabs are click´d ?. I want it to stay the same place and not “moving” up. Thx again.
Hi Soh
The history doesn’t work, when i go to http://www.sohtanaka.com/web-design/examples/tabs/#tab2 in safari it doesn’t focus on the second tab.
hi soh hi guys ,
i got a problem with this script:
I want to use the tabs with different heights without.. oh.. sry..
hi john
ye a solution for this would be perfect..
i try my best to solve it but if anyone of you get it faster it would be great
pretty nice script and site anyway go on soh
greets max from germany
@John, sorry I forgot to add one line of js here :
return false; (updated on above code sample)
this will prevent the browser from trying to jump to the anchor link~
@Frederik can you tell me which version of safari you are on? I am checking in safari now and it seems to be working fine for me~
@max I am assuming it was the same issue with John? Hope that fixes your issue
This is incredible and creative. I’ve been wanted to have a lot more widgets on my blog’s sidebar but didn’t want it to be too cluttered and so I been thinking of some kind of collapsable solution and then this comes along. I tweaked a few things and voila, everything works even better than I imagined now. Thanks for sharing man!
@mojaam glad you found it useful!
Hi Soh,
Great work! I’m testing your tabs and it works in FF but in IE7 the bottom border on the tabs is showing. I’ve tried changing the height on ul.tabs li to 32px then it works.
And addition maybe you’ve already read about the FadeIn glitch of Jquery. In IE the content is not rendered in ClearType.
maybe you can add this line in the fadeIn callback.
if(jQuery.browser.msie) this.style.removeAttribute(’filter’);
Cheers mate! Great piece.
Excellent work!
Is it possible adapt this code to make the tabs run vertical, like the jquery.ui plugin – http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html, and post it up here as an update/addendum??
coooool!
Thanks Mark for the fadeIn callback
@blank shot, you can just switch up the css to make the tabs vertical and not horizontal: http://www.sohtanaka.com/web-design/side-navigation-tooltip-popup-bubble/ maybe you can take some of that tut’s css and modify it. Let me know how that goes~
hows this??
apologies now for the amount of code
—
Simple Tabs with CSS & jQuery
body {
background: #f0f0f0;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 700px; margin: 10px auto; float:left;}
ul.tabs {
margin: 45px 0px 0px 0px;
padding: 0;
float: left;
}
ul.tabs li {
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
margin-right: -1px;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-right: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-khtml-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
$(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;
});
});
Gallery
Submit
Resources
Contact
<!–Simple Tabs w/ CSS & jQuery –>
Gallery
http://www.DesignBombs.com
Saw polecat than took bankrupt good hillbilly stew, crazy, fancy and hillbilly heap rodeo, pappy. Thar range saw me him sherrif nothin’ shiney dirt, pigs sheep city-slickers everlastin’ shotgun driveway. Promenade catfight fart fiddle jiggly gonna tarnation, fence, what quarrel dirty, if. Pot grandma crop kinfolk jezebel diesel coonskin hoosegow wirey fixin’ shack good roped in. Reckon stew tax-collectors, grandpa tobaccee hayseed good wash tired caboodle burnin’ landlord.
Smokin’ driveway wrestlin’ go darn truck moonshine wirey cow grandpa saw, coonskin bull, java, huntin’.
Stinky yonder pigs in, rustle kinfolk gonna marshal sittin’ wagon, grandpa. Ya them firewood buffalo, tobaccee cabin.
Submit
http://www.DesignBombs.com
Grandma been has bankrupt said hospitality fence everlastin’ wrestlin’ rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler.
Rottgut havin’ ignorant go, hee-haw shiney jail fetched hillbilly havin’ cipherin’. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly.
Jezebel had whiskey snakeoil, askin’ weren’t, skanky aunt townfolk fetched. Fit tractor, them broke askin’, them havin’ rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin’ cow.
Resources
http://www.DesignBombs.com
Dirt tools thar, pot buffalo put jehosephat rent, ya pot promenade. Come pickled far greasy fightin’, wirey, it poor yer, drive jig landlord. Rustle is been moonshine whomp hogtied. Stew, wirey stew cold uncle ails. Slap hoosegow road cooked, where gal pot, commencin’ country. Weren’t dogs backwoods, city-slickers me afford boxcar fat, dumb sittin’ sittin’ drive rustle slap, tornado. Fuss stinky knickers whomp ain’t, city-slickers sherrif darn ignorant tobaccee round-up old buckshot that.
Deep-fried over shootin’ a wagon cheatin’ work cowpoke poor, wuz, whiskey got wirey that. Shot beer, broke kickin’ havin’ buckshot gritts. Drunk, em moonshine his commencin’ country drunk chitlins stole. Fer tonic boxcar liar ass jug cousin simple, wuz showed yonder hee-haw drive is me. Horse country inbred wirey, skanky kinfolk. Rattler, sittin’ darn skanky fence, shot huntin’.
Contact
http://www.DesignBombs.com
Grandma been has bankrupt said hospitality fence everlastin’ wrestlin’ rodeo redblooded chitlins marshal. Boobtube soap her hootch lordy cow, rattler.
Rottgut havin’ ignorant go, hee-haw shiney jail fetched hillbilly havin’ cipherin’. Bacon no cowpoke tobaccee horse water rightly trailer tools git hillbilly.
Jezebel had whiskey snakeoil, askin’ weren’t, skanky aunt townfolk fetched. Fit tractor, them broke askin’, them havin’ rattler fell heffer, been tax-collectors buffalo. Quarrel confounded fence wagon trailer, moonshine wuz, city-slickers fixin’ cow.
Ive done something but your comments box wont allow me to post the source code directly in.. unless theres some tags i can use??
[quote]Quote tags test[/quote]
[code]Code tags test[/code]
thx, soh, for this job.
here is a slight modification if someone needs to jump into a certain tab from outside:
$(document).ready(function() {
//Default Action
$(”.tab_content”).hide(); //Hide all content
if(location.hash != “”) {
var target = location.hash.split(”#”)[1]
$(location.hash).show(); //Show first tab content
$(”ul.tabs li:has(a[rel="+target+"])”).addClass(”active”).show();;
} else {
$(”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
});
});
it’s a bit hackish but it works
Great, how easy is to make it with cookies that remembers the state ?
I could make it with ui library, but i like more your option …
@blank shot, try this link: http://www.elliotswan.com/postable/ it will convert code for you~
@fritzek thanks for that! I’m sure people will find that useful
@feha I would take a look at something like this: http://plugins.jquery.com/project/Cookie
I have used that with JQuery UI tabs, but don’t know how to implement it in your code …
I’m not that good with JQuery
This is what i use with UI tabs
// Tabs
$('#tabs').tabs({ cookie: { expires: 30 } });
can i use same with your code ?
I really would like to get it work with cookies both this tabs
and nice
http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/
thank you
ha, how odd, that first post didnt come up at first.. hence the second post..
oh well, at least its up now
hi here i am putting my qs again
and then there should be little pictures associated with tab names for example there could be a flower pic within gallery tab and a lettter tab in submit and so on so plz help me with it thanx a lot
i was saying that
i wanted to have little pictures associated with the tabs names how to do it? and i wanted the tabs names to be appeared on random every time a user refreshes the page or there is a new visitor
the tabs should be selected at random for example when u go to example page
the gallery is selected what i want to do is that every time a person visits the site there shud be different tab in location of gallery for example in ur demo its gallery but how cld we modify it that next time when i visit the demo its submit at the first place selected and the gallery is at last place or some where else
and next time its resources selected and other tabs are on other places i hope u get what i mean
Thanks for the simple tutorial, this is exactly what I was looking for
how can you add more tabs dynamically by pushing a button on your website?
nice and simple tutorial good work
In reference to the issue with ie and fonts, I suggest the following fix:
replace
$(activeTab).fadeIn();
with
if $.browser.msie)
{$(activeTab).show();}
else
{$(activeTab).fadeIn();}
return false;
You will loose the fade effect in ie but the tab navigation will continue to work without loosing cleartype on the fonts.
Sorry
Corrected comment
In reference to the issue with ie and fonts, I suggest the following fix:
replace
$(activeTab).fadeIn();
with
if ($.browser.msie)
{$(activeTab).show();}
else
{$(activeTab).fadeIn();}
You will loose the fade effect in ie but the tab navigation will continue to work without loosing cleartype on the fonts.
Thx mate, ur the man =). Cheers – John.
no reply ??? any one?
New question: Is there any way you can target multiple containers/content areas to change with just one tab click? ..the same way you can with naming an iFrame??
$(document).ready(function() {
//When page loads…
$(”.tab_content”).hide(); //Hide all content
$(”.tab_content2″).hide(); //Hide all content
$(”ul.tabs li:first”).addClass(”current”).show(); //Activate first tab
$(”.tab_content:first”).show(); //Show first tab content
$(”.tab_content2:first”).show(); //Show first tab content2
//On Click Event
$(”ul.tabs li”).click(function() {
$(”ul.tabs li”).removeClass(”current”); //Remove any “active” class
$(this).addClass(”current”); //Add “active” class to selected tab
$(”.tab_content”).hide(); //Hide all tab content
$(”.tab_content2″).hide(); //Hide all tab content2
var activeTab = $(this).find(”a”).attr(”href”); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
??????????
I’m sure this is a simple question, how do I change the font color for the active tab? I can’t seem to get it to work.
thanks
hi here i am putting my qs again
and then there should be little pictures associated with tab names for example there could be a flower pic within gallery tab and a lettter tab in submit and so on so plz help me with it thanx a lot
i was saying that
i wanted to have little pictures associated with the tabs names how to do it? and i wanted the tabs names to be appeared on random every time a user refreshes the page or there is a new visitor
the tabs should be selected at random for example when u go to example page
the gallery is selected what i want to do is that every time a person visits the site there shud be different tab in location of gallery for example in ur demo its gallery but how cld we modify it that next time when i visit the demo its submit at the first place selected and the gallery is at last place or some where else
and next time its resources selected and other tabs are on other places i hope u get what i mean
I was wondering if anyone would know how to add a ajaxloader.gif image whilst tabs are still loading.
But its a great,neat little script.
Is there a way to do this with images for the tabs?
This is my first crack at jQuery and you made it so easy, thanks!!!!
Yes there is Steph.
Look at this page,ive used background images for all of them using css.
http://www.ultimatewebnet.com
For different images for each one you would have to edit each tab ()
Although i’m a fan of jQuery UI tabs and know all about them, this one is a great start for custom and minimal tab interfaces
hey i was saying that i wanted to have little pictures associated with the tabs names how to do it? and i wanted the tabs names to be appeared on random every time a user refreshes the page or there is a new visitor
and then there should be little pictures associated with tab names for example there could be a flower pic within gallery tab and a lettter tab in submit and so on
the tabs should be selected at random for example when u go to example page
the gallery is selected what i want to do is that every time a person visits the site there shud be different tab in location of gallery for example in ur demo its gallery but how cld we modify it that next time when i visit the demo its submit at the first place selected and the gallery is at last place or some where else
and next time its resources selected and other tabs are on other places i hope u get what i mean
hi there
is it possible to use more of these tabs on one single site without copy & paste the code over and over again and include the same .js with a different name?
Like
———-
Tab1 Tab2 Tab3
TABcontent1
———
Tab3 Tab4 Tab5
Tabcontent2
———
and so on
possible?
@blankshot if you want to have multiple tabs open at the same time, instead of trying to match the tab anchor link to the content ID, if you switch that to match the content class instead, it may work. But I’m not sure how usable that feature would be…
@Dale thanks for that tip! Noted
@jan, you can specify text color like this:
ul.tabs li a {
text-decoration: none;
color: red;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
@naynesh you can try something like this: http://net.tutsplus.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
James, broke down a section of the tut on how to implement that~
@steph, yes you can just use css sprites: http://css-tricks.com/css-sprites/
@sumit, you can have multiple sets of tabs on one page with just calling one jquery/script file. But the logic you showed as your example doesn’t look right to me. Tab1,2,3 would show tab content 1? Maybe I am misunderstanding?
@banny, it looks like your looking to randomize your tabs. I believe there are plugins out there that pulls this off, and you will have to implement that with this tutorial~
Thanks for you reply
Okay maybe i wrote it a little bit confusing.
Hard to explain only with Numbers huh?
Ok letz say we have one TabSet:
_______________________
Tab1 | Tab2 | Tab3
The tab Content(1,2,3) related to the tabs
_______________________
Thats one TabBox with 3 diffrent Tabs and each one of it loads it’s own content. Like every Tab-Script
Now i want to have that TabBox multiple times on a single site with different contents of course.
I tried it with:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
but when i use that and add the tabs more than once, they won’t work. I have to inlucde the js-File over and over again and have to change the function in it in every file. So that they don’t fight each other (^^,)
Easy Works:
1 Tab-Script
X independent TabBoxes
PS.: check my website sidebar to see what i mean.
Oh ok, yea then this should be no problem.
Just make sure your tab links match with the container ID’s~
thnx soh
plz tell me the plug ins i have searched but didnt get any
tell me the names if u know
yes ur right i want to randomize the tabs every time the page refresh or loads on a new visit
Just curious if there’s a way to target specific tabs from links on other pages.
For example, I click on a “Honda Specs” link on a particular page and the link will open the “Honda Specs” tab on the “Road Bikes” page, for example?
hey soh and guys
this is wat i wanna achieve and this is wat i meant by rotation of tabs
for eg
tab 1 tab 2 tab 3 tab 4 <— this is on first page load
tab 2 tab 3 tab 4 tab 1 <—- this is on 2nd page load or refresh
tab 3 tab 4 tab 1 tab 2 <—– this is on 3rd page load and so on
or i wont mind a total tab rotation regardless of which tab comes first
like tab 4 tab 2 tab 1 tab 3 etc i hope u got it wat i meant by rotation
so plz help me and hint me regarding this thanx
I apologize, I don’t know any jQuery, but I feel this can be done simply.
Is it possible to target the “previous” and “next” tabs with a couple of links (say, a “prev” link & “next” link) outside of the tabbed interface?
Hi there
Thanks again for you help, i tried and it works better than the other script, but still not perfect.
E.g.: tab1 of tabset1 is activated on site-load.
If i click at e.g. tab2 of tabset3, ALL other tab(-sets) are closing. Even tabset1 and tabset2.
But i want that each tabset has one active tab.
See the problem in action at the searchresults of my site
http://www.sumit-online.de/?s=google
@Jan To change the font color of just the active tab, add this
ul.tabs li.active a
{
color: #red;
}
Hey, Soh! Nintensity here.
I’m running into a little problem, utilizing nested LI elements within the Simple Tabs. (concept: Sub-Nav)
Now, the problem lies within the jQuery code. If I click on a Sub-nav list, all the LI elements, including the Sub-nav’s parent LI element, becomes hidden.
What I’m trying to acheive is to click on a Sub-nav list, and that not only itself is assigned the “active” class, but it’s parent LI element so it can be displayed. Does this make sense?
@Masey I would maybe add a query string to the URL and try to do an if then else/switch statement to target/match your active tab with the query string. Here is an example of how you can choose which tab you want active: http://www.sohtanaka.com/web-design/examples/tabs/index2.htm (resources will be open by default in this example)
@Tom, I can try to add that on a future tutorial if you would like. That would work more like a carousel mixed in with the tab feature.
@Sumit, ok I see your issue now, try something like this: http://www.sohtanaka.com/web-design/examples/tabs/index3.htm
@Nintensity I may be misunderstanding your request, do you mean you want a subnav within the tab? If so it may be bad usability since most tabs behave as tabs and not as primary drop down style navigation~ Let me know~
well what abt my query?:)
Banny, I did a quick search and found similar that may lead you to the right path:
http://www.designateonline.com/discussions/comments.php?DiscussionID=4258&page=1
http://stackoverflow.com/questions/1012264/jquery-randomly-fadein-images
http://snipplr.com/view/13725/random-bg-image/
If you would like, I can come up with a tutorial for something similar in the future. I just can’t do this now since it would be re-tweaking the original intent of this tutorial~
thnx soh ur so sweet
i would love a tut from u
may be later then:)
anyone had any issues with the z-index of the tabs class, it is being stacked on top of a menu with a z-index:10 ??? thanks
ahhh, sorry, let me make it clear,
basically incorporating tabs inside tabs. is this possible with your jquery code? i’ve always wondered how to implement this.
-n
Thanks for code, it is very nice and easy, no idea that it is fun
Thanks for this. I ended up pulling the fade for the project I’m working on, but either way it’s great!
How can I add the “active” class to the “a” href element in the selected tab? I know the following line of code adds it to the selected tab, but how can I also add to the a element inside the tab?
$(this).addClass(”active”); //Add “active” class to selected tab
@florian
to target the href inside the list-item/$(this), you can do:
$(this).find(”a”).addClass(”active”); //Add “active” class to href inside selected tab
logic:
$(this) = ul.tabs li
.find(”a”) = find “a” within ul.tabs li
.addClass = add class
Nice tabs!
Could you make this rotate thru the tabs? I tried to build off your code but cannot get it to work. Could you also show me how to resume rotating after they hover away from a tab?
How would I also make it change tabs on hover? when user hovers over a tab it changes to that tab. THANKS
Hey, great script – im using this for an a-z jargon – is there any way i can disable a few of the tabs? (tried removing the a link and its still clickable!)
thanks
hi soh
well i tried but didnt get it done yet the thing which i asked u before
i want the tabs to rotate as well but i wanted the tabs to rotate at evry page load as well or page refresh for eg
tab 1 tab 2 tab 3
on next page load it shud be like this
tab 2 tab 3 tab 1 and so on
how to do it? plz tell us
thnx
Hello Soh
I figured how to get it to change tabs on hover. Just change the click to hover. Here it is.
$(”ul.tabs li”).hover(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 href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
Hi Soh.
Thank you for the line to add active class to the a element inside the ul.tabs li. I tried to include it into my code but the code doesnt seem to work. May I paste my existing code below for you to take a look.
$(document).ready(function() {
//When page loads…
$(”.tab_content”).hide(); //Hide all content
$(”ul.table-tabs li:first”).addClass(”active”).show(); //Activate first tab
$(”ul.table-tabs a:first”).addClass(”active”).show(); //Activate first a
$(”.tab_content:first”).show(); //Show first tab content
//On Click Event
$(”ul.table-tabs li”).click(function() {
$(”ul.table-tabs li”).removeClass(”active”); //Remove any “active” class
$(”ul.table-tabs a”).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 href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
Still no cookie version?
Yea, I am patiently waiting for this tab (multiple tab set in one page) and the toggle tutorial (http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/) to have a cookie version. Hope Soh can provide us with the cookie code.
Hi Soh
Please help, the tabs in my portfolio site jumps in IE6, it works fine in firefox so I have no clue what to do. I’m not a programmer so you going to have to show me step by step what I can do. Please help
Hi Soh
please how to prevent jumping to the top if tab is clicked ?
it happens when tab is located below/under (long content) or
browser scroll bars visible …
Problem with bottom border = Pain in the ass
Hilarious Soh. =)
Thanks for another great tutorial.
I think I’m going to have to start giving inspiration credit to you with all that your teaching me. Thanks dude.
soh ur students and fans are waiting for ur response
plz help us thnk u
soh i was thinking of the tab 2.0 version with cookies and tab chnges on very refresh like first tab is on last place etc for eg
if tabs are like this
tab name 1 tab name 2 tab name 3
then on next page load or refresh its like
tab name 2 tab name 3 and tab name 1 and so on
thnx
p.s i tried to do it but didnt went well
Sorry guys, I have been extremely crammed with work recently, and to be honest I won’t be able to update this tut with any extra features for a little while longer~ For those with extra feature requests that do not relate to the original tutorial itself, I apologize for the inconvenience.
Just as a hint though, I would be using this plugin for jQuery to get this going. http://plugins.jquery.com/project/Cookie
Also, for those having “jumping” issues, this is due to your content being inconsistent in size with the other tab contents. This is not a jquery issue or a bug, but simply just like the vertical scroll jump (some thought it was a glitch, but it was simply the vertical scroll showing/hiding according to how much content was on the page), its just a matter of your content getting shorter/longer with various amounts of content making it seem like its glitching.
@Niko, we are targeting the list item in our script to trigger the events, so if you would like to disable that, you would do something like this
$(”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”); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
Thanks~
thnx
Hello great solution looks good! I’m trying to get this to work inside a facebox link. You can see it working at http://www.acowancreative.com/faceboxtest2.html
at
http://www.acowancreative.com/kingmanindex3.html (link in the bottom left)
No workie
It will display the first tab then none of the others and won’t return to displaying the first tab
Any ideas
please help how can i add these cute tabs in blogger blogs plz reply
a very helpful tute & demo – thanks for making it available Soh.
i noticed on the multi tab box demo (http://www.sohtanaka.com/web-design/examples/tabs/index3.htm) that the fade effect is lost. anyway to re-implement it when using multi tabbox instances..?
ummmm …. cancel last order – .fadeIn fast fixes that.
while i’m here though …… is it possible / how would you invoke that same fade effect on standard (non-Simple Tabs) anchor points on the same page. i have some long pages, with anchor points in the normal page body (NOT in the Simple Tabs sections) and the fade effect sure is effective.
Anyone ..?
How if Content for each tab like iframe or ajax, that’s mean if I click something stil in that active tab.
Thanks
Thanks for the code! But I needed to tweak the CSS
So for the curious people, here’s the tweaked CSS:
Here’s the CSS code:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /* Set height of tabs */
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /* Subtract 1px from the height of the unordered list */
line-height: 31px; /* Vertically aligns the text within the tab */
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /* Pull the list item down 1px */
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
border: 1px solid #fff; /* Gives the bevel look with a 1px white border inside the list item */
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /* Makes sure that the active tab does not listen to the hover properties */
background: #fff;
border-bottom: 1px solid #fff; /* Makes the active tab look like it's connected with its content */
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
overflow: auto;
width: 100%;
background: #fff;
}
.tab_content {
padding: 10px;
}
So here’s the tweaked CSS:
<style type="text/css">
<!–
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /* Set height of tabs */
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /* Subtract 1px from the height of the unordered list */
line-height: 31px; /* Vertically aligns the text within the tab */
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /* Pull the list item down 1px */
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
padding: 0 10px;
border: 1px solid #fff; /* Gives the bevel look with a 1px white border inside the list item */
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /* Makes sure that the active tab does not listen to the hover properties */
background: #fff;
border-bottom: 1px solid #fff; /* Makes the active tab look like it's connected with its content */
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
overflow: auto;
width: 100%;
background: #fff;
}
.tab_content {
padding: 10px;
}
//–>
</style>
where is the css elandy2009
banny, i’ve tweaked the CSS to make the code better
thnx e landy
any running demo mate??
how would I get a href link on the same page as the tabs to change the tab? Using fritzek example, i grab the hash and use that as the target to show but its not working. Thanks for the help!
$(”a.pointer”).click(function() {
var target = $(”a.pointer”).hash.split(”#”)[1]
//$(location.hash).show(); //Show first tab content
$(”ul.tabs li:has(a[rel="+target+"])”).addClass(”active”).show();
});
Thanks a lot for the tut bro. Simple and to the point! Do you know of a way to slow down the fade effect (both in and out)? Thanks for your time!
i’m with Bob (2 comments up) – how would you get a link that’s inside the tab container content to trigger a tab change ..?
Hey, I just wanted to thank you for the great tutorials. Simple or advanced, keep them coming!!
@Bob & @Cracks – I think this is the one feature that everyone is really wanting to know how to implement. Having such links would enable you to link directly to a tab from external websites, emails etc and would be a welcomed addition.
Let’s hope Soh can come up with an add-on solution for us and present it in his usual clear and awesome way.
Just a quick question, I have used background images for the tabs, I am using the 3 states norm, hover and active, everything works great except the active state will not show with background-position: left bottom; In fact it will not show no matter what I try. Here is the weird thing: the active a:hover does work.
Here is my css:
html ul.tabs li.active, html ul.tabs li.active a:hover
{background-position: left bottom;}
And the jQuery is unaltered from this tutorial
Any thoughts?
Thanks in adavnce
Nate do you have a sample link I can look at?
Soh,
I figured it out, I had the normal state relating to the li a, i took off the a and its all good.
This site is awesome, thanks so much.
Hey, I want to delegate the “submit” , “reset” and other “form” inputs to my tabs from another page.
I`v two pages:
1. tabs.aspx -> the page with the tabs…
2. all.aspx -> the page with the form (all.aspx.cs has the server side of course…)
so I entered this code:
$(’#tabs’).tabs({
load: function(event, ui) {
$(’submit’).live(”click”, function() {
$(ui.panel).load(this.href);
return false;
});
}
});
into tabs.aspx and load into my tab the other page -> all.aspx
—– but when I click on “submit” or “reset” the page redirect me to all.aspx (with the post of course..)
what can I do?
thank you for the help & time.
Shaked.
Hi
Thank you
After studying a cookie plugin …
I have modified the script to support cookies
Will be soon publishing a link.
Hi,
Thank you. A very nice solution indeed. I extended your solution to multi line with state management in ASP.NET. No cookies!!
http://www.aseemgautam.com/blog/index.php/2009/10/27/jquery-multiline-tabs-with-state-management/
Brilliantly simple!
Hey!
How can i make it work from an external menu??
i.e. I have a common menu with Home, Downloads, Contact, …etc.. and inside one of those common items there are submenus that take the user INSIDE a particular TAB, INSIDE the page where the jQuery Tabs are.
Am i making sense?….
THANKS!
Has anybody created code for having multiple tabbed areas on one page?
Shouldn’t be too hard in theory– instead of applying the default action and onclick events to the selectors in the entire page, you’d look for them only inside specified divs.
But that’s theory, and I’m not the best at execution. If anyone has already done this, I’d appreciate the code!
Greg
Hey Greg, yea some mentioned that and I had a fix for them in the comments above~
Open specified tab
http://www.sohtanaka.com/web-design/examples/tabs/index2.htm
multiple tabs on one page
http://www.sohtanaka.com/web-design/examples/tabs/index3.htm
Hello. First, great tutorial. Simple and to the point without any unnecessary fluff. I’m running into a small problem configuring it for my sites current color scheme. I can’t seem to get the active tabs text color to change. I thought it would just be a matter of applying “color:…” to the “html ul.tabs li.active,…” definition since that’s where I changed the background color but it won’t stick. Basically, I just want to change the active tabs text color (when not hovered) to black. Any ideas?
http://um3d.dc.umich.edu/Temp/newsite/tab_test.html
Thanks
Thanks very much for this tutorial and code. With some good modications (put the tabs on the side, modified div structure, etc) I am using it to display info/screen shots for my upcoming uISV product.
It is working fine except for one small issue; if the browser is scrolled, it jumps to the top of the window
Now the most bizarre part is; if I replace the .fadeIn() with a .show() then it no longer jumps; it works great … but it would be nice to have .fadeIn()
Any suggestions? (off to the jquery site to check for bugs/info).
Very nice samples and tutorials….I am learning a lot from this blog/site. I am on the development side of the web (ASP.NET + little PHP) but in these bad economy times I am learning to to all!
cool tabs!
I was able to get it to fade by adding this code to add right before your tag.
$(function() {
$(”.tabs”).tabs(”.tab_container> div”, {effect: ‘fade’, fadeOutSpeed: 400});
});
It worked perfect for me, of course I made some modification to the css here is what I changes.
.tab_container {
position:relative;
height:132px;
width: 880px;
}
.tab_container div {
display:none;
position:absolute;
font-size:14px;
color:#444;
width:881px;
}
Hello SOH!
Thank’s for your tutorial and this project and so thank to this sample http://www.sohtanaka.com/web-design/examples/tabs/index3.htm it’s very helped
Check out http://foo.iskandar.web.id it’s work with effect
/**
* Cookie + tabs
*/
$(function(){
$(”div.tabs div.frame”).hide();
if($.cookie(’active_bar’) == null)
{
$(”div.tabs div.frame:first”).show();
$(”ul.tabs li:first”).addClass(”active”).show();
}
else
{
$($.cookie(’active_bar’)).show();
$(’ul.tabs a[href=' + $.cookie('active_bar') + ']‘).parent().addClass(”active”).show();
}
$(”ul.tabs li”).click(function() {
$(”ul.tabs li”).removeClass(”active”);
$(this).addClass(”active”);
$(”div.tabs div.frame”).hide();
$($(this).find(”a”).attr(”href”)).fadeIn();
$.cookie(’active_bar’, $(this).find(”a”).attr(”href”), { path: ‘/’, expires: 10 });
return false;
});
});
Thank you …very useful post also your blog design is great..
Sorry about my English, I have a problem loading google maps correctly inside the tab, and I try several solutions for jQuery UI Tabs but not work for this tabs, any solution?
Nice & Simple. Thank you.
it’s Roooock! thannks..
Thank you so much.. Its flawless, Works charm!! Appreciate your valuable time and work. cheers!!
Excellent post thanks. I recently started redesigning my site and was looking for
tabs with CSS
Here i found it, Thanks for sharing very useful.
Hi Soh!!!!
Simple and clear jquery tabs! Thanks for this.
However I have a question *(~.~)*
Is it possible to add a code that will automatically and continuosly go to the next tab even without clicking on the tabs?
How do I implement it?
Many Thanks!
GM,
How can we insert more than one on the same page, it seems only one works.
Thank you
I have 2 tabs. My page is showing the second tabs content for a second during page load, then makes it invisible like it should be. How would I fix this?
Never mind, figured it out.
It would be nice to be able to link to a specific tab with a url string.
Nice work though, thanks.
This is really very very good Site… Thanks
wOw! these tutorials are Verrrryyy Useful.. Love them.. Thanx a Lott..
is there a way to have all links from tab contentes to open in the very same tab? thanks in advance and great tut keep it up
VEEEEEEEERY COOOOOOOOOOL!!!!!! I like it lots!!!
This is really very very good Site… Thanks
Very logical coding out there with JQuery! very nice! like: if the page has loaded, hide everything, then pick the first tab give it a class, show the first content page!
Very logical!
One thing confuses me.. how do I set up jquery with wordpress? I cant get it to work!
Nice and simple. I like it!
You can preview it on one of my sites: http://heal.lv/services/sms_acc
I did a little css modification.
First of all thanks for the great articles/tutorials that you put out, they are very helpful. Now, what I’m trying to do is combine two of your articles into one solutions (”Active” State in CSS Navigations & This one), converting your horizontal tabs into a vertical menu system.
You can see what I’ve got going on here: anytag.com/jQ-tabs.html
Everything seems to be working great until you take a look at it in IE6… oh I hate IE;-) What is happening in IE is that the LAST css tag “Working” for the active state is being swapped for each of the navigation point instead of the active states for each of the different nav elements(please see the source).
Does anyone have an idea of how I can fix this, I’ve been pulling my hair out trying to fix this bug. Thanks in advance for any help you can provide.
Brian
anyway to fox pagination within tabs ?
http://www.accessdunia.com.my/main/our-products
once user clicks page 2 of pagination the other tabs become empty…
Very good attention to the details. I see this as a stand-alone page with no other content. It will work great for me.
But it still “jumps” on click tabs.I did it work: Just add fixed height to .tab_container class. For sample:
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
height: 550px;
}
Great tutorial! Quick question – Once a tab is clicked, I’m trying to get the main content to change, along with some content in the sidebar (which is a separate div).
i.e. – someone clicks tab1 and the tab1/tab_content is shown, at the same time, a different div in the sidebar would be shown at the same time……..I can’t find a tutorial or even a forum discussion on how to do this….if its too complicated for this thread, no worries…thought id ask though….thanks!
tim.
Hi Soh,
Fantastic Tabs!
Have you investigated a way to get your tabs in a vertical layout?
Hai dear…
This is very useful tuto. thanks.
I have one issue;ie; I want to create one more Jquery tab in the same page. If i take one more copy of existing tab, it does not work. I think one or more additional script to be used. can you please explain or give me a solution .
Very nice … i like this very much, easy to learn and implement.
It looks good but only problem is when we change the method show() to slideDown()- when we clicks quickly on another tab before the first tab appear the two contents are displaying in same tab, one after another . I will be happy if you reply me.
Thank You
You can wrap the .click function with
if (!jQuery(this).hasClass(”active”)) {
This way the active tab doesn’t fade out when you click and it’s already active
hi soh, great tutorial symple and easy but
i have the same question like masey, bob, cracks … directly link to a specific tab in the same page from external websites. for example,
product page = page1.php with 3 tabs, some external pages has a deeplink to
http://www.xy.com/page1.php#tab1 <- (google adwords)
http://www.xy.com/page1.php#tab2 <- (banner)
http://www.xy.com/page1.php#tab3 <- (microsite)
tutorial from fritzek unfortunately not working
thanx a lott and for your time!
What fritzek posted works, you just need to format your tab links like this: some tab
Then, $(”ul.tabs li:has(a[rel="+target+"])”) gets the rel attribute and it just works
That obviously didn’t work out as intended lol
* Your link should look like: a href=”#tab5″ rel=”tab5″
Hi this is a nice tutorial.. where easy to understand and better to implement.. its going to implement in my webite
Very useful tutorial and the code is well commented, so well done to you for that.
hi p-l gendreau (and fritzek)
thanks for your tip -> link rel=”tab″, now it works !