0

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

这是代码：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/

4

4 回答 4

3

试试这个代码：

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

演示

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

另一种选择：带有链接的表格标签标题，而不是带有LIs （主要 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;
      }

演示

于 2012-10-01T08:58:29.450 回答
2

伪类在svisited上不起作用li，因为它们不是链接，也没有办法“访问”一个 li 元素。

因此，您可以做的是将as 设置为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:40​px;}

演示

于 2012-10-01T08:57:29.507 回答
2

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

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

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

请参阅此小提琴以获取工作代码。

于 2012-10-01T08:58:20.287 回答
1

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;
}
​

查询

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

演示

于 2012-10-01T08:59:24.257 回答