Switch Tabs

vanilla (pure) js navigation, switch tabs

by slawe

HTML

<div class="tab_wrap">           
    <div class="tabs">
        <ul>
            <li><a name="tab" id="tab_1" href="javascript:void(0)" onclick="tabs(1)" class="active">Tab 1 (test length tab)</a></li>
            <li><a name="tab" id="tab_2" href="javascript:void(0)" onclick="tabs(2)" class="">Tab 2</a></li>
          <li><a name="tab" id="tab_3" href="javascript:void(0)" onclick="tabs(3)" class="">Tab 3</a></li>
        </ul>
    </div>                
    <div name="tab_content" id="tab_content_1" class="tab_content active" style="display: block;">
        <ul>
            <li><a href="#">Article 1<br><small>2012.01.01.</small></a></li>
            <li><a href="#">Article 2<br><small>2012.01.02.</small></a></li>
            <li><a href="#">Article 3<br><small>2012.01.03.</small></a></li>
            <li><a href="#">Article 4<br><small>2012.01.04.</small></a></li>
            <li><a href="#">Article 5<br><small>2012.01.05.</small></a></li>
        </ul>
    </div>
    <div name="tab_content" id="tab_content_2" class="tab_content" style="display: none;">
        <ul>
            <li><a href="#">Article 1<br><small>2012.01.01.</small></a></li>
            <li><a href="#">Article 2<br><small>2012.01.02.</small></a></li>
            <li><a href="#">Article 3<br><small>2012.01.03.</small></a></li>
        </ul>
    </div>
  <div name="tab_content" id="tab_content_3" class="tab_content" style="display: none;">
    <span>sssssssssssssssss ssssssss ssssssssss sssssssssssss ssssssssssssssssssssssssss</span>
    </div>
</div>

CSS

/*======== This is for the container ========*/

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tab_wrap{
    border:1px solid #999;
    /* max-width:300px; */
    width: 100%;
}

/*======== Add some style for tabs ========*/

.tabs {
    width: 100%;
    margin: auto;
    overflow: hidden;   
    background: #F9F9F9;
}
.tabs ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
  
}
.tabs li a {
    width:auto;
    min-width: 100px;
    color: #444444;
    display: block;
    float: left;
    font-weight:bold;   
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border:none;
    border-right:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;
  
}
.tabs li a:hover {
    color: #7d7d7d; 
    background:#FFFFFF;
}
.tabs li:first-child a {
    border-left:none;
}
.tabs li a.active {
    background:#FFFFFF;
    border:none;
    border-right:1px solid #d9d9d9;
    border-bottom:1px solid #FFFFFF;    
}
.tabs li:first-child a.active { 
    border:none;
  border-right:1px solid #d9d9d9; 
    border-bottom:1px solid #FFFFFF;    
}
.tabs li:last-child a.active {
    border:none;
    border-right:1px solid #d9d9d9;  
    border-bottom:1px solid #FFFFFF;    
}

/*======== Style the content divs ========*/

.tab_content {
    background:#FFF;
    padding:0;
    display:none;   
}
.tab_content.active{
    display:block;  
}
.tab_content ul {
    margin:0px;
    padding:0px;
    list-style:none;    
}
.tab_content li {
    display:block;
    overflow: hidden;   
    border-bottom:1px solid #d6dde0;    
}
.tab_content li:last-child {
    border-bottom:none;
}
.tab_content li a {
    display:block;
    list-style:none;
    overflow: hidden;   
    padding:10px;           
    text-decoration:none;
    color:#444444;
}
.tab_content li a:hover {
    color:#000000;
    background:#F5F5F5; 
}
.tab_content li small {
    color:#AAAAAA;
    font-size:11px;
   ...

JavaScript

function tabs(selectedtab) {	
	// contents
	var s_tab_content = "tab_content_" + selectedtab;	
	var contents = document.getElementsByTagName("div");
	for(var x=0; x<contents.length; x++) {
		name = contents[x].getAttribute("name");
		if (name == 'tab_content') {
			if (contents[x].id == s_tab_content) {
			contents[x].style.display = "block";						
			} else {
			contents[x].style.display = "none";
			}
		}
	}	
	// tabs
	var	s_tab = "tab_" + selectedtab;		
	var tab = document.getElementsByTagName("a");
	for(var i=0; i<tab.length; i++) {
		name = tab[i].getAttribute("name");
		if (name == 'tab') {
			if (tab[i].id == s_tab) {
			tab[i].className = "active";						
			} else {
			tab[i].className = "";
			}
		}
	}
}