/    Sign up×
Community /Pin to ProfileBookmark

I having Tab problems

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]

[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>
[/code]

[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]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @postonoh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...