Simple, minimal and light weight tab jQuery
As a Javascript/jQuery developer, i am trying to use less plugin as much posible, it’s batter to use small code snippets instead of using plugin, it is also best for page load time. here i am showing you a minimal, light weight jQuery Tab content snippets. You can add and customize it very easily.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div id="tabs-container"> <ul class="tabs"> <li class="active"><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> <li><a href="#tab-4">Tab 4</a></li> </ul> <div class="tab"> <div id="tab-1" class="tab-content"> <p>Lorem ipsum dolor sit amet, qui epicuri neglegentur signiferumque ea, eos zril maiestatis an. Ad mea modus labores ancillae, aeque eirmod ad per. Ea duo odio graeco voluptaria. Alii facete mnesarchum duo et, pri id minim partiendo. Per ad nullam eirmod diceret, ea erat omnis partiendo </p> </div> <div id="tab-2" class="tab-content"> <p>Vdolor sit amet, qui epicuri neglegentur signiferumque ea, eos zril maiestatis an. Ad mea modus labores ancillae, aeque eirmod ad parchum duo et, pri id minim partiendo. Per ad nullam eirmod diceret, ea erat omnis partiendo </p> </div> <div id="tab-3" class="tab-content"> <p>FGad per. Ea duo odio graeco voluptaria. Alii facete mnesarchum duo et, pri id minim partiendo. Per ad nullam eirmod diceret, ea erat omnis partiendo </p> </div> <div id="tab-4" class="tab-content"> <p>Lorem ipsum dolor sit amet, qui epicuri neglegentur signiferumque ea, eos zril maiestatis an. Ad mea modus labores ancillae, aeque eirmod ad per. Ea duo odio graeco voluptaria. Alii facete mnesarchum duo et, pri id minim partiendo. Per ad nullam eirmod diceret, ea erat omnis partiendo </p> </div> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
body { font-family: arial; font-size: 14px; } .tabs { font-family: arial; clear: both; height: 18px; list-style: outside none none; padding: 0px; } .tabs li { height: 30px; line-height: 30px; float: left; margin-right: 0px; background-color: #ccc; border: solid 1px #999; } .tabs li.active { position: relative; background-color: #2ac4ea; border-bottom: 1px solid #2ac4ea; z-index: ; } .tabs li a { padding: 10px; color: #000; text-decoration: none; } .tabs .active a { color: #fff; } .tab { background-color: #fff; border: 1px solid #ccc; margin-bottom: 20px; width: auto; } .tab-content { padding: 20px; display: none; } #tab-1 { display: block; } |
jQuery Function:
|
1 2 3 4 5 6 7 8 9 10 |
jQuery(document).ready(function($) { $(".tabs a").click(function(event) { event.preventDefault(); $(this).parent().addClass("active"); $(this).parent().siblings().removeClass("active"); var tab = $(this).attr("href"); $(".tab-content").not(tab).css("display", "none"); $(tab).fadeIn(200); }); }); |
Demo:
[paypal-donation]
