How to create tab with javascript
How to create tab with javascriptThis 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
http://dl.iteye.com/upload/attachment/0071/0192/c1c22f33-9f5d-388f-ae0b-074d04b105ce.png
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"; /* Hack for check its blank or not */if(webPathName=='undefined1') {}else{openTab=webPathSplit; $(".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.
Download Source
页:
[1]