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

小提琴：http://jsfiddle.net/uFALn/63/

Answer 1

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

更改ul.tabs>li到ul.tabs a并设置

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

后台见this fiddle的工作代码。

Answer 2

的visited伪类不会在li上工作，因为它们不是链接，也无法“访问”li元素。

那么，你可以做的是设置a s到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;} 

Demo

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

Demo

:visited仅应用于引用。同时，上面的代码在页面重新加载后不起作用（因为它应该用于链接）。您还可以测试文档上的链接颜色。准备并LI小号

另一个选项设置相应的类：形式标签报头的链接，而不是与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

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