How to make tab menu in jQuery + HTML
Here i will show you simple and light weight tab menu in HTML + jQuery for small purpose. I have taken just three tabs. Each tab has individual id and active tab has a class.
In this below example there is no any jQuery animation effect. It is simple and light weight.
<ul>
<li class="TabbedPanelsTab TabbedPanelsTabSelected" id="tab_1" onclick="tabber('content_1');">Tab1</li>
<li class="TabbedPanelsTab" id="tab_2" onclick="tabber('content_2');">Tab2</li>
<li class="TabbedPanelsTab" id="tab_3" onclick="tabber('content_3');">Tab3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id="content_1">
Here is your content 1..
</div>
<div id="content_2" style="display:none;">
Here is your content 2..
</div>
<div id="content_3" style="display:none;">
Here is your content 3..
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function tabber(id)
{
for(var i=1; i<=3; i++){
if('content_'+i == id){
jQuery('#'+id).show();
jQuery('#tab_'+i).addClass('TabbedPanelsTabSelected');
}
else{
jQuery('#content_'+i).hide();
jQuery('#tab_'+i).removeClass('TabbedPanelsTabSelected');
}
}
}
</script>
