function generateTabs(element) { jQuery(function($) { $("."+element+" .tab[id^=tab_menu]").click(function() { var currentDiv=$(this); $("."+element+" .tab[id^=tab_menu]").removeClass("selected"); currentDiv.addClass("selected"); var index=currentDiv.attr("id").split("tab_menu_")[1]; $("."+element+"-container .tabcontent").css('display','none'); $("."+element+"-container #"+element+"_tab_content_"+index).fadeIn(); }); }); } generateTabs('divTabs');
<div id="tabs"> <div class="divTabs"> <div id="tab_menu_1" class="tab selected first">PHP</div> <div id="tab_menu_2" class="tab">HTML5</div> <div id="tab_menu_3" class="tab">CSS3</div> <div id="tab_menu_4" class="tab last">JQUERY</div> </div> <div class="divTabs-container"> <div id="divTabs_tab_content_1" class="tabcontent" style="display:block;"> <ul> <li><a href="http://www.webstutorial.com/learn-php-php-tutorials-php-part-1/programming/php">Learn PHP | PHP Tutorials | Part 1</a></li> <li><a href="http://www.webstutorial.com/learn-php-php-tutorials-php-part-2/programming/php">Learn PHP | PHP Tutorials | Part 2</a></li> <li><a href="http://www.webstutorial.com/codeigniter-tutorials-codeigniter-lessons-part-1/programming/php">Learn Codeigniter | Codeigniter Tutorial | Part 1</a></li> </ul> </div> <div id="divTabs_tab_content_2" class="tabcontent"> <ul> <li><a href="http://www.webstutorial.com/html5-air-hockey-game-canvas/html-5">HTML5 Air Hockey Game Using Canvas</a></li> <li><a href="http://www.webstutorial.com/html5-css3-admin-panel-dashboard-template/html-5">HTML5 CSS3 Admin Panel | Dashboard Template</a></li> <li><a href="http://www.webstutorial.com/range-input-slider-html5-css3/html-5">Range Input Using HTML5 & CSS3</a></li> </ul> </div> <div id="divTabs_tab_content_3" class="tabcontent"> <ul> <li><a href="http://www.webstutorial.com/css3-ui-buttons-set/css3">CSS3 UI Buttons Set</a></li> <li><a href="http://www.webstutorial.com/css3-portfolio-menu/css3">CSS3 Powered Portfolio & Menu</a></li> <li><a href="http://www.webstutorial.com/css3-image-hover-effects/css3">CSS3 Image Hover Effects</a></li> </ul> </div> <div id="divTabs_tab_content_4" class="tabcontent"> <ul> <li><a href="http://www.webstutorial.com/simple-jquery-toggle-tutorial-css-jquery-slide-toggle/jquery">Simple JQuery Toggle Tutorial </a></li> <li><a href="http://www.webstutorial.com/jquery-page-loading-popup/jquery">JQuery Page Loading Popup</a></li> <li><a href="http://www.webstutorial.com/jquery-popup-jquery-slide-popup/jquery">JQuery Slide Popup</a></li> </ul> </div> </div> </div>
body{ font-family:Arial; font-size:12px; } #tabs{ margin:10px auto; width:335px; } .tab{ float:left; border:1px solid #e3e3e3; border-radius:5px 5px 0 0; background:#f3f3f3; padding:3px 5px; margin-right:3px; border-bottom:0px; cursor:pointer; position:relative; } .tabcontent{ display:none; width:300px; padding:10px; background:#f3f3f3; clear:both; border:1px solid #e3e3e3; border-radius:0px 3px 3px 3px; } .selected{ top:1px; } .tabcontent ul { padding-left: 20px; margin: 0; } .tabcontent li { color: #555555; list-style: square outside none; } .tabcontent li a { color: #555555; line-height: 22px; text-decoration: none; }