Question

Let me explain what I want. I have the following (partial) HTML.

<ul>
    <li class="positioncommunity"><a href="#">community</a></li>
    <li class="positionsolutions"><a href="#">solutions</a></li>
    <li class="positionmeetings"><a href="#">meetings</a></li>
</ul>

<div id="tab_content">
</div>

community, solutions and meetings are three tabs in the html page. I want to change the “tab_content” div based on which tab a user clicks.

I also want the user to know which tab he is in. So, I want to highlight the tab element. Here is where I am running into the problem. I have the following css for the tab elements.

#leftPan ul li.positioncommunity{padding:20px 0 0 53px;}
#leftPan ul li.positionsolutions{padding:20px 0 0 100px;}
#leftPan ul li.positionmeetings{padding:20px 0 0 40px;}

You can see that I have three CSS classes to position the tab elements. Now, how do I apply a background image to the tab element without changing the CSS class. Specifically, I am looking for a design pattern to separate CSS styling of elements from CSS positioning. Please help me with a NEAT solution to the above problem. I am sure it is a very common problem, but I cannot find a satisfactory solution.

Answer 1

The most right way is to use additional class for it. Anyway you can set the backgound in javascript (you will have click handler). Without javascript you can’t implement it. Css can’t react to the click event.

http://jsfiddle.net/KDyky/

ul li { float:left;  }
ul li a { margin:2px; padding:3px 7px; display:block; }

$('ul li a').click(function() {
    $('ul li a').css({ background: 'none' });
    $(this).css({ background: 'green' });
    return false;
});

for the background use your image.