CSS tabs

HTML & CSS
1

Hey,

I am trying to figure something out on this page:

http://www.freemanholland.com/newsite/about-us

Notice the tabs, when you click the content will change…

When you hover over the tab you will a different tab appearing, what i want to do is when a specific tab is selected change the background of the tab…

Can this be done? If so how?

Thanks

2

try removing id default from the first tab. Either way - that looks to be the culprit.

3

Hey i had to take out class=“highlight” as taking out id=“default” didn’t work…

But how can i get the first tab to be selected by default? :confused:

4

It works once you’ve clicked on the first tab, since only then is the highlight(this) invoked.

It wouldn’t do that if you removed the default class=“highlight” from the first tab. But understandably you want the tab highlighted by default. Hmmm… will have to think about this a bit more.

PS

I would still recommend you look into an option that degrades more gracefully. At the moment, if someone has JS off, they can’t access your other tab sections. Here is another example that uses jQuery and degrades nicely (turn off JS to see what I mean):

http://www.sohtanaka.com/web-design/examples/tabs/

5

Hey thanks,

That works almost perfectly for me, i think i may have missed something out :confused:

If you look at this page:

http://www.freemanholland.com/newsite/about-us

And then click on a different tab, the first tab remains selected?

6

I’m sure jquery code do this but here is a example I have http://www.visibilityinherit.com/code/current-page-withjs.php

7

Hmm, thanks for the tip, i did just try it but had no luck, i will have a play around, and in the mean time if any one can offer any suggestions i would really appreciate it :wink:

Thanks again

8

Sure, it’s css that does the styling in either case. In your example, because you are using inline JS (not best practice) I’m not experienced enough to tell you the answer.

I don’t know JS syntax well enough, but I suspect you could change this

document.getElementById(‘tab-1’).style.display=‘block’;

to something like

document.getElementById(‘tab-1’).class=‘visible’;

and then in the .visible styles do something like

.visible {
  display: block;
  background: url(../images/tab_on.png);
}

But my JS above might be wrong, but if you know how that code works you could play with it a bit. Otherwise, someone else who knows JS will not doubt fix it up.

9

Can it not be done via css?

10

This jquery example shows that it’s possible: