jQuery – Create Simple Tabs using HTML, jQuery and CSS
Implemented simple jQuery tabs with HTML, jQuery and CSS.
In this tutorial we will show you how to create simple jQuery tabs.
jQuery tabs are a very nice way of showing lots of content into a very small space.
On Click tabs will show/hide.
Demo Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Tabs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
#tabswitch{font-family:Arial;font-size:12px;}
#tabswitch ul{list-style:none;margin:0;padding:0;clear:both;height:27px;}
#tabswitch ul li{float:left;margin:0;padding:5px;border:solid 1px #EFEFEF;border-bottom:solid 1px #ffffff;cursor:pointer;}
#tabswitch ul li.active{border-bottom:solid 1px #EFEFEF;color:#5261ac;}
#tabswitch ul li:hover{color:#5261ac;}
#tabswitch .tab-container{width:400px;border:solid 1px #EFEFEF;padding:5px;display:none;}
#tabswitch .tab-container p{border-bottom:1px solid #CCCCCC;margin-top:0px;line-height:20px; padding-top:10px;padding-bottom:10px;}
#tabswitch .tab-container p.last_p{border-bottom:none; margin-top:0px;line-height:20px;padding-bottom:10px;padding-top:10px;}
</style>
</head>
<body>
<div id="tabswitch">
<ul>
<li class="tab1 active">Value for Business Users</li>
<li class="tab2">Value for IT Professionals</li>
</ul>
<div class="tab-container tab1" style="display: block;">
<p>Covers all Microsoft Dynamics business application areas.</p>
<p>At least 30% more content compared to the nearest competitor</p>
<p>100 highly structured, predefined Excel reports ready for immediate use.</p>
<p>Available in 21 languages.</p></li>
<p>Affordable pricing (per database, unlimited users) with low TCO.</p>
<p class="last_p">30 day free trial, fixed BI project price and risk free implementation.</p>
</div>
<div class="tab-container tab2">
<p>Data warehouse based (Kimball star schema) architecture designed for performance, multiple-sources, daily snapshots and incremental load.</p>
<p>Uses existing Microsoft infrastructure (SQL database, Excel, Active Directory).</p>
<p>User friendly Customization wizard.</p>
<p>100% open SQL code for further development.</p>
<p>Well documented and well structured code.</p>
<p class="last_p">Risk free implementation with 30 days trial period.</p>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tabswitch ul li:first").addClass("active");
jQuery("#tabswitch div.tab-container:first").show();
jQuery("#tabswitch ul li").click(function(){
jQuery("#tabswitch div.tab-container").hide();
jQuery("#tabswitch ul li").removeClass("active");
var tab_class = jQuery(this).attr("class");
jQuery("#tabswitch div." + tab_class).show();
jQuery("#tabswitch ul li." + tab_class).addClass("active");
})
});
</script>
</body>
</html>
Leave a Reply