A while back I built a neat tab system. The only downside is that, being an horizontal tab system - unlike the one used on this site which by the way is somewhat similar code-wise - isn't really suitable for mobile devices if you have too many tabs, as they will wrap. If that's the case you can do what I did for the navigation on this site: when you are on mobile view, it turns into a drop-down selection box. Anyway, here it is (I left the original colours as bright as they were, but what's important is of course the functionality)
The HTML is pretty simple:
<div class="tabbedMenu">
<ul>
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="clear"></div>
<div class="tabContent active">
<h1>This is tab 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>
<div class="tabContent">
<h1>This is tab 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>
<div class="tabContent">
<h1>This is tab 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices elit erat, sit amet pellentesque erat faucibus eu. Pellentesque rutrum tortor vitae elit cursus varius. Vivamus consectetur orci viverra nisi volutpat varius. Sed blandit ligula quam, nec vehicula nisi dictum id. Phasellus volutpat porta nisl. Praesent convallis erat tellus, eget accumsan risus vulputate non. Integer tempus est mauris. Ut tempus risus nec sodales laoreet. Nullam id nisi nec tellus consequat condimentum. Nunc urna enim, sagittis feugiat diam id, congue egestas tortor. Aliquam et posuere tortor, id vulputate magna. Morbi volutpat vel risus ut dapibus. Praesent lobortis hendrerit turpis, ac tempor sapien sollicitudin eget. Mauris hendrerit molestie est, id consectetur libero fermentum nec. Donec consectetur eleifend eros et vulputate. Sed nec est ipsum.
</p>
</div>
</div>
As well as the CSS
/*TABBED MENU */
.wrapper .content .contentBox .tabbedMenu p{
color:#070235;
font-weight:normal;
line-height:14px;
font-size:11px;
}
.tabbedMenu{
padding-left:20px;
padding-right:20px;
margin-top:20px;
margin-bottom:20px;
}
.tabbedMenu ul{
list-style-type:none;
margin: 0;
padding: 0;
}
.tabbedMenu ul li a{
text-decoration:none;
padding:5px 15px;
display:block;
}
.tabbedMenu ul li{
float:left;
margin-right:2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* background:url("tab.jpg") no-repeat 0 0; */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
/*for IE*/
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#00A3EF',GradientType=0);
}
.tabContent h1{
margin:0;
font-size:19px;
color:#0c007e;
}
.tabContent{
background-color:#def5f5;
padding:15px;
display:none;
}
.tabContent.active{
display:block;
}
.tabContent p{
margin:0;
}
.tabbedMenu ul li.active{
filter:progid:dximagetransform.microsoft.gradient(enabled=false);
background: none no-repeat #def5f5;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/*END OF TABBE MENU*/
And here is the script:
$(document).ready(function(){
//alert("ohi");
var $allTabs = $(".tabbedMenu ul li");//all the tabs
var $allTabContent = $(".tabContent");//all the respective content
var activeIndex;
$allTabs.click(function(){//when a tab is clicked on
$allTabs.removeClass("active");//remove class active from any tab
$(this).addClass("active");//add class active to the clicked on
$allTabs.each(function(index){
if($(this).hasClass("active")){//find the tab with active tab
activeIndex = index;//get its position
//console.log("the index is " + activeIndex );
$allTabContent.removeClass("active");//remove active class from all content containers
$(".tabContent").eq(activeIndex).addClass("active");//add class active to the container that matches the index of the tab
}
});
});
//console.log($(".tabContent p").css("line-height"));
});