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

`<ul class="idTabs">
<li class="tabBorder tabBackers"><a href="#enabling">Enabling<br>Next-Generation<br>Medicine</a></li>
<li class="tabBorder tabBackers"><a href="#what">What is<br>Ayrris&trade;</a></li>
<li class="tabBorder tabBackers"><a href="#benefits">Benefits<br>of Ayrris&trade;</a></li>
<li class="tabBackers"><a href="#why">Why Ayrris&trade;<br>for Big Data?</a></li>

<div id="enabling">Some content</div>
<div id="what">Some content</div>
<div id="benefits">Some content</div>
<div id="why">Some content</div>`

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 ...