23rd of June 2010 5
jQuery simple tabs
I know what you think, "there are lots of jQuery plugins so why care?". Well... haven't you ever wanted something simple that you just made and can control in whatever way you feel or modify to to do anything that requires something to show below (or wherever) when you click a link or just something?
I'll show you how to do simple tabs without any sort of plugins at all and it's just a little snipped of code and some basic CSS-styling.
The jQuery script
var alltabs = $('div.tab'); //selector for all the tabs
var tabs = $('#tabs'); //selector for the tab menu
alltabs.first().show(); //show the first tab
tabs.find('li:first').addClass('on'); //add class 'on' to the first li to set the item to active
tabs.find('a').live('click', function() {
alltabs.hide()
tabs.find('li').removeClass('on')
$(this).parent().toggleClass('on')
var tabref = $(this).attr('rel')
$(tabref).fadeIn(500)
this.blur()
return false;
})
}); //end domready
CSS
#tabs li { float:left;margin-right:5px; }
#tabs li a { display:block; padding:3px 6px; text-decoration:none; }
#tabs li.on a { background:#DF29B9;color:#fff; } /* background for active tab */
.tab { display:none; } /* hide tabs */
.tab { border:1px solid #ddd;padding:15px;border-bottom:2px solid; }
XHTML
<li><a rel="div.tab1" href="#">Tab 1</a></li>
<li><a rel="div.tab2" href="#">Tab 2</a></li>
<li><a rel="div.tab3" href="#">Tab 3</a></li>
<li><a rel="div.tab4" href="#">Tab 4</a></li>
<li><a rel="div.tab5" href="#">Tab 5</a></li>
</ul>
<div class="tab tab1">
<h2>Tab 1 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste
</div>
<div class="tab tab2">
<h2>Tab 2 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste
</div>
<div class="tab tab3">
<h2>Tab 3 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste
</div>
<div class="tab tab4">
<h2>Tab 4 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste
</div>
<div class="tab tab5">
<h2>Tab 5 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste
</div>
This is quite much to go through. You'd better check the demo and its source code. Feel free to ask any further and specific questions about this.
Share it!
Was it good for you to?
Related posts
Similar posts to this oneSponsors
Support for the site!3 great comment(s) for this post
-
armine_ 2:51 pm 17/07 of 2010
it was very interesting to read.
Reply
I want to quote your post in my blog. It can?
And you et an account on Twitter? -
sysday 4:19 pm 31/07 of 2010
I would like to exchange links with your site byme.se
Reply
Is this possible? -
Mr Sandal 8:10 am 2/08 of 2010
Your web site has really been helpful to me and I thank you for your time and effort working on it. Good Luck! :)
Reply
2 Trackbacks For This Post
-
armine_ 2:51 pm 23/06 of 2010
it was very interesting to read.
I want to quote your post in my blog. It can?
And you et an account on Twitter? -
sysday 4:19 pm 23/06 of 2010
I would like to exchange links with your site byme.se
Is this possible? -
Mr Sandal 8:10 am 23/06 of 2010
Your web site has really been helpful to me and I thank you for your time and effort working on it. Good Luck! :)
Your opinion matters. Add it below.
