Tab Concept Using Simple Css And Javascript

            Nowdays tabs are very essential thing for every websites.Even in the facebook,Gmail these tabs concept are used..
            Lets see how it works using javascript and css. Just call the id were u want the tab and use the script then the output will be :

Live Demo : 

• SOFTWARE
• FRIENDS
• DESIGNING

• IT Software Development
• Web Designing
• Web Hosting
• Networking

• Sujeeth
• Kishore
• Dheeksha
• Naveen

• Website
• Blogger
• Google+
• Facebook

Live Demo : 

Download Coding : TabConcept

Style :

<style type="text/css">
#tab_main {  
    margin: 0px auto 0px auto;  
    width:400px;  
}  
.tab_menu h4 {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:23px;  
    color:#003300;  
    letter-spacing:-1px;  
    margin-bottom:10px; 
    margin-left:130px; 
}  
.tabbed_main {  
    border:1px solid #494e52;  
    background-color:#003300;  
    padding:8px;      
}
ul.tabs {  
    margin:0px; padding:0px;  
}  
ul.tabs li {  
    list-style:none;  
    display:inline;  
}  
ul.tabs li a {  
    background-color:#009900;  
    color:#ffebb5;  
    padding:8px 14px 8px 14px;  
    text-decoration:none;  
    font-size:9px;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-weight:bold;  
    text-transform:uppercase;  
    border:1px solid #464c54;   
}  
ul.tabs li a:hover {  
    background-color:#009900;  
    border-color:#2f343a;  
}  
ul.tabs li a.active {  
    background-color:#ffffff;  
    color:#282e32;  
    border:1px solid #464c54;   
    border-bottom: 1px solid #ffffff;  
}  
.content {  
    background-color:#ffffff;  
    padding:10px;  
    border:1px solid #464c54;     
}  
#content_2, #content_3 { display:none; }  
ul.tabs {  
    margin:0px; padding:0px;  
    margin-top:5px;  
    margin-bottom:6px;  
}  
  .content ul {  
    margin:0px;  
    padding:0px 20px 0px 20px;  
}  
.content ul li {  
    list-style:none;  
    border-bottom:1px solid #d6dde0;  
    padding-top:15px;  
    padding-bottom:15px;  
    font-size:13px;  
}  
.content ul li a {  
    text-decoration:none;  
    color:#3e4346;  
}  
.content ul li a small {  
    color:#8b959c;  
    font-size:9px;  
    text-transform:uppercase;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    position:relative;  
    left:4px;  
    top:0px;  
} .content ul li:last-child {  
    border-bottom:none;  
}
ul.tabs li a {  
    background-image:url(images/tab_off.jpg);  
    background-repeat:repeat-x;    
    background-position:bottombottom;  
}  
ul.tabs li a.active {  
    background-image:url(images/tab_on.jpg);  
    background-repeat:repeat-x;  
    background-position:top;   
}  
.content {  
    background-image:url(images/content_bottom.jpg);  
    background-repeat:repeat-x;    
    background-position:bottombottom;   
}  
</style>

Script :

<script type="text/javascript">

function tabSwitch(new_tab, new_content) {  
      
    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';          
    document.getElementById(new_content).style.display = 'block';     
      
  
    document.getElementById('tab_1').className = '';  
    document.getElementById('tab_2').className = '';  
    document.getElementById('tab_3').className = '';          
    document.getElementById(new_tab).className = 'active';        
  
}  
function tabSwitch_2(active, number, tab_prefix, content_prefix) {  
      
    for (var i=1; i < number+1; i++) {  
      document.getElementById(content_prefix+i).style.display = 'none';  
      document.getElementById(tab_prefix+i).className = '';  
    }  
    document.getElementById(content_prefix+active).style.display = 'block';  
    document.getElementById(tab_prefix+active).className = 'active';      
      
}  
</script>

Index :

<div id="tab_main" class="tab_menu">  
    <h4>Tab Concept</h4>  
    <div class="tabbed_main">  
      <ul class="tabs">  
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">SOFTWARE</a></li>  
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">FRIENDS</a></li>  
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">DESIGNING</a></li>  
</ul>
          
        <div id="content_1" class="content">
        
            <ul>
               <li>IT Software Development</li>
               <li>Web Designing</li>
               <li>Web Hosting</li>
               <li>Networking</li>
            
            </ul>
        
        </div>  
        <div id="content_2" class="content">
        
        
            <ul>
               <li>Sujeeth</li>
               <li>Kishore</li>
               <li>Dheeksha</li>
               <li>Naveen</li>
            
            </ul>
        
        </div>  
        <div id="content_3" class="content">
        
        <ul>
               <li>Website</li>
               <li>Blogger</li>
               <li>Google+</li>
               <li>Facebook</li>
            
            </ul>
        
        </div> 
            
    </div>  
  
</div>