Question

I have a tab page for which I want to apply a different background color when a tab was visited. How can I do that?

Here is the code:
HTML:

<ul class="tabs">
       <li><a href="#tab1">Tab One</a></li>
        <li><a href="#tab2">Tab Two</a></li>
        <li><a href="#tab3">Tab Three</a></li>
</ul>
<div class="pane">
    <div id="tab1">
        <p>This is first tab</p>
    </div>
    <div id="tab2" style="display:none;">
        <p>This is second tab</p>
    </div>
    <div id="tab3" style="display:none;">
        <p>This is third tab</p>
    </div>
</div>

CSS:

ul.tabs>li {float: left; padding: 10px; background-color: lightgray;
          margin-right:5px; border-radius:10px 10px 0 0;
      }

ul.tabs li a{text-decoration:none;}

ul.tabs li a:visited{color:red;}

ul.tabs li:visited{background:lime;}

p{padding:40px;}

jQuery:

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $(".pane div").hide();
        $($(this).attr("href")).show();
    });
})

fiddle: http://jsfiddle.net/uFALn/63/

Answer 1

The HTML element li does not have a :visited selector. You need to apply all your CSS to the anchor.

Change the ul.tabs>li to ul.tabs a and set the background for

ul.tabs li a:visited {
    color:red;
    background: lime;
}

See this fiddle for working code.