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();
    });
})

小提琴：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 for it：

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

Demo

:visited仅适用于参考。同时，上面的代码在页面重新加载后不起作用（因为它应该用于链接）。您还可以在document.ready上测试链接颜色，并在LI s上设置相应的类

另一个选项：使用链接表单标签页眉，而不是LI s（主要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

Answer 2

visited伪类不适用于li，因为它们不是链接，也无法“访问”li元素。

因此，您可以做的是将a设置为display:block;并为设置背景颜色。

在页面更改/刷新后，即使 也可以使用。

你的新CSS：

ul.tabs>li { float: left; margin-right:5px; } ul.tabs li a { /* padding, background and border-radius goes here now */ display:block; padding: 10px; background-color: lightgray; text-decoration:none; border-radius:10px 10px 0 0; } ul.tabs li a:visited{color:red;} ul.tabs li a:visited { /* li a:visited instead of li:visited */ background:lime; } p{padding:40px;}

<强> Demo

Answer 3

HTML元素li没有:visited选择器。您需要将所有CSS应用于锚点。

将ul.tabs>li更改为ul.tabs a并设置

的背景

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

有关正常工作的代码，请参阅this fiddle。

Answer 4

HTML

<ul class="tabs">
   <li class="active"><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;

  margin-right:5px;
  border-radius:10px 10px 0 0;
}
li{
background: lightgray;
}
ul.tabs li a{
text-decoration:none;
}

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

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

p{
padding:40px;
}

.active{
    background:blue;
}

JQUERY

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

DEMO

更改li上的背景颜色：已访问

4 个答案: