/    Sign up×
Community /Pin to ProfileBookmark

Tab Colors changing

Copy linkTweet thisAlerts:
Aug 12.2009

One of my site is this: [url]http://prostatcorp.com/Detail.asp?id=15[/url]

See the 3 tbas at the bottom (Overview, Specifications, What’s Included)? How do I make it so that the 1 tab the current information is on has a different background?

Right my table looks like this:

[CODE]
 <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”20″ colspan=”3″ class=”BackgroundNavTabs”><table>
<tr>
<td><a href=”javascript:void(0);” onclick=”toggleOn(‘overview’);”>Overview</a></td>
<td><a href=”javascript:void(0);” onclick=”toggleOn(‘specs’);”>Specifications</a></td>
<td><a href=”javascript:void(0);” onclick=”toggleOn(‘content’);”>What’s Included</a></td>
<td></td>
</tr>
</table>
</tr>
</table>
[/CODE]

Then I show m <div> with my content…

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@ptejadaAug 12.2009 — Im afraid this is not a CSS matter

You could acomplish this using a Javascript function with a switch. Since i learned Jquery JavaScript is kind of blurred in my head... so bare with me

on each tab you would add an onclick event with a funtion like tabSwitch()... it will be alot easier if you ad a unique ID to each tab like tab tab2...

The function may look like this:
[CODE]

function tabSwitch(x) {
for(n=1;n>=4;n++){
document.getElementById('tab'+n+"'").style.background = "blue" ; //asuming the default background color is blue
}
document.getElementById('tab'+x+"'").style.background = "red" ;
}

[/CODE]

So for the tab one the onclick event will look like this: onClick="tapSwitch(1)"

just replace the one for each tab with it corresponding number. Hope you know JavasCript i honestly did not had time to explain this one...

Good Luck
×

Success!

Help @Brachole 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.28,
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,
)...