Jquery Tabs Example Code - Jquery

How to create tabs using jquery?

Snippet Code


  
Rate this page :
  [ 0 votes]

Jquery tabs is a simple functionality which allows you to create tabs in your webpage. Here, the sample code to create tabs using jquery is given below.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <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>

Tags


Ask Questions

Ask Question