How to create tab with javascript
This tutorial explains how to create a tab using jquery and simple javascript. Both techniques are very simple and short. You create a simple tab with JavaScript, html and css. Lets look the example.
Demo
HTML Code
<div class="tab-box"> <a href="javascript:;" class="tabLink activeLink" id="cont-1">Tab 1</a> <a href="javascript:;" class="tabLink " id="cont-2">Tab 2</a> <a href="javascript:;" class="tabLink " id="cont-3">Tab 3</a> </div> <div class="tabcontent paddingAll" id="cont-1-1"> This is content box one </div> <div class="tabcontent paddingAll hide" id="cont-2-1"> This is content box Two </div> <div class="tabcontent paddingAll hide" id="cont-3-1"> This is content box Three </div>
- id=cont-1 is define for tab content one (cont-1-1)
- id=cont-2 is define for tab content two (cont-2-1) if you want to add more tab just add the id cont-? and also add concern id with �1 in tab content box
- activeLink class for active tab
- tablink class is used in javascript for change the tab
CSS Code
.tab-box { border-bottom: 1px solid #DDD; padding-bottom:5px; } .tab-box a { border:1px solid #DDD; color:#666666; padding: 5px 15px; text-decoration:none; background-color: #eee; } .tab-box a.activeLink { background-color: #fff; border-bottom: 0; padding: 6px 15px; } .tabcontent { border: 1px solid #ddd; border-top: 0;} .hide { display: none;}
JavaScript Code
Add Latest Jquery file and write below code
<script type="text/javascript"> $(document).ready(function() { $(".tabLink").each(function(){ $(this).click(function(){ tabeId = $(this).attr('id'); $(".tabLink").removeClass("activeLink"); $(this).addClass("activeLink"); $(".tabcontent").addClass("hide"); $("#"+tabeId+"-1").removeClass("hide") return false; }); }); }); </script>
how to call a second div through URL Asked by Hariswebs
<script type="text/javascript"> $(document).ready(function() { webPath= document.location.href; webPathSplit=webPath.split("#"); webPathName= webPathSplit[1]+ "1"; /* Hack for check its blank or not */ if(webPathName=='undefined1') { }else{ openTab=webPathSplit[1]; $(".tabLink").removeClass("activeLink"); $("#"+openTab).addClass("activeLink"); $(".tabcontent").addClass("hide"); $("#"+openTab+"-1").removeClass("hide") } $(".tabLink").each(function(){ $(this).click(function(){ tabeId = $(this).attr('id'); $(".tabLink").removeClass("activeLink"); $(this).addClass("activeLink"); $(".tabcontent").addClass("hide"); $("#"+tabeId+"-1").removeClass("hide") //return false; }); }); }); </script>
In the above JavaScript class .tabLink is being check in every click. As per click we add or remove hide class in tab content box.