Jquery code for tabs - Jquery
How to create simple tabs using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
You can easily create tabs using jquery code for use in your web pages.
<script type='text/javascript'>
$(document).ready(function() {
$(".litab-list a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
var litab = $(this).attr("href");
$(".description").not(litab).css("display", "none");
$(litab).fadeIn();
});
});
</script>
<div id="main-litab">
<ul class="litab-list" style='height: 18px;padding:0px;'>
<li class="active"><a href="#litab-1">Step 1</a></li>
<li><a href="#litab-2">Step 2</a></li>
<li><a href="#litab-3">Step 3</a></li>
</ul>
<div class="litab">
<div id="litab-1" class="description" style='display: block;'>
<p>We welcome you to Hscripts.com. Praised as the best free webmaster resources online, by our users.</p>
</div>
<div id="litab-2" class="description">
<p>Hscripts.com offers a collection of quality webmaster resources and tools for web masters and developers. </p>
</div>
<div id="litab-3" class="description">
<p>Easy to use, these web tools can really help you build, promote, or enhance your web site.
Sign up today for our free newsletter to know the hottest resource added. </p>
</div>
</div>
</div>
<style>
.litab-list li {height: 30px;line-height: 30px;float: left;margin-right: 1px;background-color: #ccc;
border-top: 1px solid #d4d4d1;border-right: 1px solid #d4d4d1;border-left: 1px solid #d4d4d1;list-style:none;}
.litab-list li.active {position: relative;background-color: #fff;border-bottom: 1px solid #fff;z-index: 5;}
.litab-list li a {padding: 10px;text-transform: uppercase;color: #fff;text-decoration: none; }
.litab-list .active a {color: blue;}
.litab {background-color: #fff;border: 1px solid #BDBDBD;float: left;margin: 0;width: auto;width: 560px;padding: 5px;}
.description { display: none;}
</style>
