[code="JS"]
$(document).ready(function()
{
$(".tabs-content").each(function(){
$("div:not(:first)", this).hide();
});
$('#tabs a').click(function()
{
$("#tabs>li.active").removeClass("active");
$(this).parent().addClass("active");
$(".tabs-content").each(function(){
$("div:not(.tabs-content)", this).hide();
});
$($(this).attr('href')).show();
return false;
});
});
HTML:
[code="HTML"]
Section 1
This is content in section 1.
Section 2
This is content in section 2.
CSS gebruikt voor de demo:
[code="css"]
/* tab styles */
ul#tabs
{
list-style: none; border-bottom: 3px solid #ff7100;
width: 95%;
padding: 5px 5px 0px 5px;
overflow: hidden;
}
ul#tabs li.active
{
float: left;
display: block;
padding: 5px;
background-color: #fc8527;
margin: 0px 10px 0px 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #ff7100;
border-bottom: 0px;
}
ul#tabs li:hover
{
float: left;
display: block;
padding: 5px;
background-color: #ff7100;
margin: 0px 10px 0px 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #fc8527;
border-bottom: 0px;
}
ul#tabs li
{
float: left;
display: block;
padding: 6px 6px 0px 6px;
margin: 0px 10px 0px 0px;
}