jquery - 更改 li :visited 上的背景颜色

Question

我有一个标签页，我想在访问标签页时为其应用不同的背景颜色。我怎样才能做到这一点？

代码如下: 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

试试这段代码:

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

和它的CSS:

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

Demo

:visited 仅适用于引用。同时，上面的代码在页面重新加载后将不起作用(对于链接来说应该如此)。您还可以在 document.ready 上测试链接颜色并在 LIs

上设置相应的类

另一种选择:形成带有链接的选项卡标题，而不是 LI(主要的 css 更改):

ul.tabs>li {
     float: left;

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

demo