Tabs

Posted in: javascript by musiitwa joseph 2015-01-11 at 17:11:19

image for Tabs Tabs give you the ability to breakup content on one page into sections that are seen one by one. The sections have a menu bar with two or more panels, clicking on one pane displays content of the section corresponding to that pane. The first section of content displays as the default.

javascript

function __(x){
return document.getElementsByClassName(x);
}
function _(x){
return document.getElementById(x);
}

_("tab_section").innerHTML = __("tab_section")[0].innerHTML;//making the first content of the tabs to show as default
function toggleTabs(ID){
var all_tabs = __("tab");
var section = _(ID);
var tab = _("li_"+ID);
for(var i=0; i<all_tabs.length; i++){
all_tabs[i].style.backgroundColor = "#0000CC";
all_tabs[i].style.color = "#CCCCCC";
}
_("tab_section").innerHTML = section.innerHTML; //loading content of the clicked to show
tab.style.backgroundColor = "#FFF";
tab.style.color = "#0000CC";
tab.style.transition = "all 0.3 linear 0s";
}



Html

<div class="container">
<h2>Tabs</h2>
<ul id="tab_menu">
<li id="li_1" class="tab active"><a href="" onClick="return false;" onMouseDown="return toggleTabs('1');">History</a></li>
<li id="li_2" class="tab"><a href="" onClick="return false;" onMouseDown="return toggleTabs('2');">Vision</a></li>
<li id="li_3" class="tab"><a href="" onClick="return false;" onMouseDown="return toggleTabs('3');">Mission</a></li>
</ul>
<div id="tab_section"><!-- content of the tabs is loaded here--></div>
<div id="1" class="tab_section">
<!-- content of tab1-->
</div>
<div id="2" class="tab_section">
<!-- content of tab2-->
</div>
<div id="3" class="tab_section">
<!-- content of tab3-->
</div>
</div>



css

body{
width: 100%;
background-color:#D7D7D7;
padding: 0;
margin: 0;
font-family:arial;
}
.container{
width:95%;
max-width:280px;
margin:auto;
}
#tab_menu{
list-style:none;
width:100%;
margin:0px;
margin-bottom:-1px;
padding:0px;
}
#tab_menu li{
background-color:#0000CC;
list-style:none;
margin:5px 0 0 0;
min-height:30px;
border-radius:6px 6px 0 0;
-0-border-radius:6px 6px 0 0;
min-width:80px;
color:#CCCCCC;
text-align:center;
display:inline-block;
border:1px solid #000066;
border-bottom:none;
}
#tab_menu a{
font-size:18px;
color:inherit;
text-decoration:none;
display:block;
text-transform:uppercase;
padding:5px;
outline:none;
}
#tab_menu li:hover{
background-color:#0033FF;
transition:all linear 0.3s;
cursor:pointer;
}
.tab_section{
display:none;
}
#tab_section{
height:100px;
width:100%;
background-color:#FFFFFF;
border:1px solid #000066;
padding:10px;
overflow:auto;
}
#tab_menu .active{
background-color:#FFFFFF;
color:#0000CC;
}
Related Posts