The code below creates very simple tabbed interface with plain HTML, CSS and jquery -
The jQuery
$('.tabsContent').hide();
$('.tabsContent:first').show();
$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){
$('.theTabs li').removeClass('selectedTab');
$(this).parent().addClass('selectedTab');
var currentTab = $(this).attr('href');
$('.tabsContent').hide();
$(currentTab).show();
return false;
});
The HTML
<ul class="theTabs">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1" class="tabsContent">
Tab 1
</div>
<div id="tab-2" class="tabsContent">
Tab 2
</div>
<div id="tab-3" class="tabsContent">
Tab 3
</div>
The CSS
.theTabs{
font-weight: bold;
}
.theTabs li{
float: left;
}
.theTabs li a{
display: block;
padding: 6px 0;
}
.tabsContent{
display: none;
}
.selectedTab{
background: red;
}
The jQuery
$('.tabsContent').hide();
$('.tabsContent:first').show();
$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){
$('.theTabs li').removeClass('selectedTab');
$(this).parent().addClass('selectedTab');
var currentTab = $(this).attr('href');
$('.tabsContent').hide();
$(currentTab).show();
return false;
});
The HTML
<ul class="theTabs">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
<div id="tab-1" class="tabsContent">
Tab 1
</div>
<div id="tab-2" class="tabsContent">
Tab 2
</div>
<div id="tab-3" class="tabsContent">
Tab 3
</div>
The CSS
.theTabs{
font-weight: bold;
}
.theTabs li{
float: left;
}
.theTabs li a{
display: block;
padding: 6px 0;
}
.tabsContent{
display: none;
}
.selectedTab{
background: red;
}
No comments:
Post a Comment