Jquery BBQ Example - Jquery
How to code jquery bbq example?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Jquery BBQ can create multiple jquery ul tab widgets simultaneously without reloading the page. The simple jquery BBQ Code used to create widgets are given below.
<script type='text/javascript'>
$(document).ready(function() {
$(".litab-list a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
var litab = $(this).attr("href");
$(".description").not(litab).css("display", "none");
$(litab).fadeIn();
});
});
</script>
<div id="main-litab">
<ul class="litab-list" style='height: 18px;padding:0px;'>
<li class="active"><a href="#litab-1">Burgers</a></li>
<li><a href="#litab-2">Chicken</a></li>
<li><a href="#litab-3">Kebabs</a></li>
</ul>
<div class="litab">
<div id="litab-1" class="description" style='display: block;'>
<div style='width:100%;'>
<div style='width:70%;float:left;'>
<p>A hamburger is a sandwich consisting of one or more cooked patties of ground meat, usually beef,
placed inside a sliced bun.</p>
</div>
<div style='width:30%;float:left;'>
<img src='burger.jpg' width=150px height=100px>
</div>
</div>
</div>
<div id="litab-2" class="description">
<div style='width:100%;'>
<div style='width:70%;float:left;'>
<p>Barbecue chicken consists of chicken parts or entire chickens that are barbecued, grilled or smoked. </p>
</div>
<div style='width:30%;float:left;'>
<img src='chicken.jpg' width=150px height=100px>
</div>
</div>
</div>
<div id="litab-3" class="description">
<div style='width:100%;'>
<div style='width:70%;float:left;'>
<p>Kebab, is a Middle Eastern, Eastern Mediterranean, and South Asian dish of pieces of meat, fish, or vegetables
roasted or grilled on a skewer or spit originating in the Eastern Mediterranean</p>
</div>
<div style='width:30%;float:left;'>
<img src='kebabs.jpg' width=150px height=100px>
</div>
</div>
</div>
</div>
</div>
<style>
.litab-list li {height: 30px;line-height: 30px;float: left;margin-right: 1px;background-color: #ccc;
border-top: 1px solid #d4d4d1;border-right: 1px solid #d4d4d1;border-left: 1px solid #d4d4d1;list-style:none;}
.litab-list li.active {position: relative;background-color: #fff;border-bottom: 1px solid #fff;z-index: 5;}
.litab-list li a {padding: 10px;text-transform: uppercase;color: #fff;text-decoration: none; }
.litab-list .active a {color: blue;}
.litab {background-color: #fff;border: 1px solid #BDBDBD;float: left;margin: 0;width: auto;width: 560px;padding: 5px;}
.description { display: none;}
</style>
