Switching a element background when selected

HTML & CSS
1

I’m stumped trying to figure out a way to have a different background on my <li> elements when an <a> inside of them is selected.

I’m also using a Jquery tabbing feature called idTabs to navigate to various anchors when clicked to give the appearance of tabs. It’s really all a one page website.

The difficulty is in trying to get a different “selected” sort of background on the tab link <li> that has just been clicked.

Tab markup is

`

Some content
Some content
Some content
Some content
`

So the tabBacker CSS has a colored background and I’d like that to switch to an image when that link is selected. But the anchor link is inside the <li> that needs the switched background. It like to call an image called button-backer_on.gif as a background when selected.

Here’s current CSS:

.idTabs li { float:left; width:234px; height:94px; background-color:#2f2f2f; font-size:18px; text-align:center; } .idTabs li a { color:#ffffff; } .tabBorder { border-right:1px solid #3c3c3c; } .tabBackers { background-color:#353535; } .tabBackers a.selected { background:#0082c8 url(../img/button-backer_on.gif) top left no-repeat; }

And the dev link:

I also got to figure out to center that button text Vertically in the <li> … weird problem …

Thanks

2

Shoot. I figured it out … I just had to apply my background formatting to the anchor instead of the <li>.

Does anybody know how to center that text vertically?

3

You could set the UL to display: table and the LIs to display: table-cell (remove the float) and vertical-align: middle and set the width and height on the LIs that was on the As. Then you’d have to remove display: block from the As and put the blue background on the LIs on hover and when selected.

4

My understanding was that all the action had to happen on the anchors. Can I use the <li> as a hotspot? I would love to know how to do that.

<a href=“someUrl.html”><li>Some text</li></a>

5

There also must be a way to tell it to do a colspan=“4” right? because right now the table is stacking vertically.

I tried this too: display:table-row;

Didn’t work.

6

I am slowly getting the picture. What I was missing in the past post was the vertical align middle part. That snapped everything horizontal nicely.

My last issue is, I still don’t see how to do a .selected on an <li>. I tried to display the <li> as an anchor or something, but it didn’t work. I can’t do this on a hover because it’s just required for the “pages” that are deemed in the “on” state.

New dev link:

http://www.savagepixels.com/ayrris/indexTest.html

thanks

7

Nice work so far. What you can do is this in your CSS:

.idTabs li:hover, .idTabs li.selected {
  background: #0082c8;
}

So, that will make the menu item blue when you hover over it, and it will also be blue if you add a class of “selected” to the LI, which you would do when that menu link’s content is visible. At the moment, the “selected” class is being placed on the <a> … which is probably better, but using display: table and vertical-align center makes it hard (if not impossible) to get the <a> to fill the menu item space.

So I’d look at editing the JS so the .selected class is placed on the LI instead.

Edit:

Personally, I use this script for tabs, which happens to add the “selected” class to the LI, so that may be an easier route to follow.

8

http://www.savagepixels.com/ayrris/indexTest.html

Ahhhhh … getting close … just no cigar yet …

I’m telling jquery to place the class on the <li> but it put it on the anchor.

switch($('.idTabs a')) { case $('.enablingLink'): $('.tabBackersEnabling').addClass("selected"); $('.tabBackersWhat').removeClass("selected"); $('.tabBackersBenefits').removeClass("selected"); $('.tabBackersWhy').removeClass("selected"); break; case $('.whatLink'): $('.tabBackersEnabling').removeClass("selected"); $('.tabBackersWhat').addClass("selected"); $('.tabBackersBenefits').removeClass("selected"); $('.tabBackersWhy').removeClass("selected"); break; case $('.benefitsLink'): $('.tabBackersEnabling').removeClass("selected"); $('.tabBackersWhat').removeClass("selected"); $('.tabBackersBenefits').addClass("selected"); $('.tabBackersWhy').removeClass("selected"); break; case $('.whyLink'): $('.tabBackersEnabling').removeClass("selected"); $('.tabBackersWhat').removeClass("selected"); $('.tabBackersBenefits').removeClass("selected"); $('.tabBackersWhy').addClass("selected"); break; }

9

I’m starting to think this aint possible. Nothing will switch the damn class of another element. It always thinks I want to deal with an anchor.

Haven’t I seen this butt simple move done a million times all over the damn internet? Shouldn’t be this hard. They never even mentioned having the hover effect, but now that you do … yeah let’s do that too. That link you pasted in is cool. Not really a plugin though is it? More like a guy just trying to tell you how to do this from scratch which I don’t have the time for right now unfortunately. Do i need to stat over? What gives?

Even if i learn his way, it’s not gonna switch the class of a different element.

I think for my purposes today with limited time and all I’m just gonna go down and dirty

http://elasticitydev.com/ayrris/

Thanks for all the help Ralph!
|sc

10

Well, it seems to work as you want, so well done. :slight_smile:

11

Thanks again Ralph. I learned a lot on that journey.