How to make tabs using CSS and JavaScript

HTML

First, create a container for the tabs and content.

<div class="tab_wrap">
</div>

Now, create two tabs. Add active class for the first, so it will be the active tab onload.

    <div class="tabs">
        <ul>
            <li><a name="tab" id="tab_1" href="javascript:void(0)" onClick="tabs(1)" class="active">Popular</a></li>
            <li><a name="tab" id="tab_2" href="javascript:void(0)" onClick="tabs(2)">Recent</a></li>
        </ul>
    </div>  

Now create the content divs for the tabs.

    <div name="tab_content" id="tab_content_1" class="tab_content active">
        <ul>
            <li><a href="#">HTML Techniques<br /><small>2012 10 12</small></a></li>
            <li><a href="#">HTML Techniques<br /><small>2012 10 12</small></a></li>
            <li><a href="#">HTML Techniques<br /><small>2012 10 12</small></a></li>

        </ul>
    </div>
    <div name="tab_content" id="tab_content_2" class="tab_content">
        <ul>
            <li><a href="#">2HTML Techniques<br /><small>2012 10 12</small></a></li>
            <li><a href="#">2HTML Techniques<br /><small>2012 10 12</small></a></li>
            </li>
        </ul>
    </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:50%;	
	color: #444444;
	display: block;
	float: left;
	font-weight:bold;	
	padding: 10px;
	text-align: center;
	text-decoration: none;
	border:none;
	border-left: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-left:1px solid #d9d9d9;
	border-bottom:1px solid #FFFFFF;	
}
.tabs li:first-child a.active {
	border:none;
	border-bottom:1px solid #FFFFFF;	
}
.tabs li:last-child a.active {
	border:none;
	border-left: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;
	font-style:italic;
}
.tab_content li a:hover small {
	color:#AAAAAA;
}

JavaScript

<script type="text/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 tabs = document.getElementsByTagName("a");
	for(var x=0; x<tabs.length; x++) {
		name = tabs[x].getAttribute("name");
		if (name == 'tab') {
			if (tabs[x].id == s_tab) {
			tabs[x].className = "active";						
			} else {
			tabs[x].className = "";
			}
		}
	}	  
}
</script>

Demo »


Go Daddy


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Tipsy jQuery Tooltip

Tipsy jQuery Tooltip

20/02/2013

Tipsy is a jQuery plugin for creating a Facebook-like tooltip effect based on an anchor tag′s title attribute.


1 comment

ketaki2015-10-31 17:50

can i get JavaScript explanation Plz..as i am new to it need little understanding before i use it in project \\\\r\\\\n

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the lion *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top