JS code
[CODE]
$(window).ready(function() {
//When page loads…
$(“.tab_content”).hide(); //Hide all content
$(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
$(“.tab_content:first”).show(); //Show first tab content
//On Click Event
$(“ul.tabs li”).click(function() {
$(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
$(this).addClass(“active”); //Add “active” class to selected tab
$(“.tab_content”).hide(); //Hide all tab content
var activeTab = $(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
[code=html]
<div class=”grid8a”>
<div class=”tabs-box”>
<ul class=”tabs”>
<li><a href=”#tab1″ class=”openTab”>Last-minute</a></li>
<li><a href=”#tab2″ class=”openTab”>Hot deals</a></li>
</ul>
<div class=”clear”></div>
<div class=”tab-top”>
<div class=”tab_container”>
<div class=”tab_content” id=”tab1″>Demo data 1
<div class=”clear”></div>
</div>
<div class=”tab_content” id=”tab2″>Demo data 2
<div class=”clear”></div>
</div>
<div class=”clear”></div>
</div>
</div>
<!– .tab-top –>
<div class=”tab-bottom”></div>
</div><!– ./tabs-box –>
</div>
[CSS]
.tab-top {
background:url(graphics/demo4/images/tab-bg-top.png) no-repeat 0 0;
padding-top:6px;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 60px; /*–Set height of tabs–
width: 100%;
background:url(graphics/demo4/images/tab-bg.png) no-repeat 0 0;
}
ul.tabs li {
float: left;
height: 60px;
line-height: 36px;
margin: 0;
padding: 0;
position: relative;
width: 310px;
}
ul.tabs li span {
position:absolute;
background:url(graphics/demo4/images/bot-bg.gif) repeat 0 0;
width:20px;
height:9px;
bottom:-9px;
display:none;
right:10px;
}
ul.tabs li.active span{
display:block;
}
ul.tabs li a {
display: block;
font-family: ‘Knewave’,cursive;
font-size: 24px;
line-height: 29px;
padding-left: 11px;
padding-top: 20px;
color:#b35024;
padding-bottom: 11px;
margin-right: 10px;
outline: medium none;
text-decoration: none;
}
html ul.tabs li.active a {
padding-top: 18px;
padding-left: 32px;
color: #F1421E;
font-size: 30px;
padding-bottom: 13px;
letter-spacing: -1px;
background:url(graphics/demo4/images/tab-active.png) no-repeat 0 0;
}
ul.tabs li a:hover { color:#F1421E;}
html ul.tabs li.active li:hover { /*–Makes sure that the active tab does not listen to the hover properties–
}
.tabs-box {
overflow:hidden;
margin-bottom:35px;
}
.tab_content {
background:url(graphics/demo4/images/page1-bg5.gif) repeat-x 0 0 #f7edcb;
overflow:hidden;
margin-right: 10px;
padding-bottom: 7px;
position:relative;
}
.tab_container {
background:url(graphics/demo4/images/tabs-bg-right.png) repeat-y right 0;
}
.tab-bottom {
background:url(graphics/demo4/images/tab-bg-bottom.png) no-repeat 0 0;
width:100%;
height:27px;
}
.page1-box5 {
float:left;
width:138px;
overflow:hidden;
position:relative;
}
.page1-box3 {
float: left;
overflow: hidden;
padding-left: 9px;
width:200px;
padding-top: 6px;
}
.page1-box3 a {
display:inline-block;
color:#413e32;
font-weight:bold;
font-size:13px;
line-height:16px;
text-transform:uppercase;
}
.page1-box3 a:hover {
color:#e54a0d;
}
.page1-box2 {
overflow:hidden;
padding-bottom: 6px;
padding-top: 5px;
margin: 0 12px 0 21px;
position:relative;
background:url(graphics/demo/images/divider3.png) repeat-x 0 bottom;
}
.page1-box4 {
color: #413E32;
float: left;
font-size: 11px;
width:222px;
line-height: 15px;
overflow: hidden;
padding-top: 7px;
}
.page1-box4 a {
display:inline-block;
color:#e54a0d;
}
.page1-box4 a:hover {
color:#413e32;
}
.page1-box4 span {
display:block;
}
.grid8a{
width: 620px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
[/CSS]