How to create tab with javascript

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.

 

Download Source