当用户单击div时，更改div的颜色
当用户单击div时，更改div的颜色
提问于 2016-07-14 20:26:20
我有几个div，当用户单击其中任何一个时，我希望更改其背景颜色，并且我还希望第一次默认情况下，第一个div应该是活动的彩色背景
我使用的代码是
.tabs.active a {
background: black;
}<div class="col-md-2 tabs">
<a href="#">
<p>First</p>
</a>
</div>
<div class="col-md-2 tabs">
<a href="#">
<p>Second</p>
</a>
</div>
<div class="col-md-2 tabs">
<a href="#">
<p>Third</p>
</a>
</div>
但是颜色并没有改变。有人能告诉我代码出了什么问题吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 2016-07-14 20:45:51
您可以简单地在Tabindex中使用:focus伪类。
但是如果你关注任何其他东西，那么标签的背景样式将会丢失:(
.tabs>a>p:focus{
background-color:gray !important;
display:inline-block;
color:#000;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 tabs" >
<a href="#">
<p tabindex="1"> First </p>
</a>
</div>
<div class="col-md-2 tabs" >
<a href="#">
<p tabindex="2"> Second </p>
</a>
</div>
<div class="col-md-2 tabs" >
<a href="#">
<p tabindex="3"> Third </p>
</a>
</div>
Stack Overflow用户
发布于 2016-07-14 23:03:56
$(".tabs").on("click", function(e){
e.preventDefault();
$(".tabs.active").removeClass("active");
$(this).addClass("active");
});//
$(".tabs").eq(0).trigger("click");.tabs.active a
{
display: block;
background: black;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="col-md-2 tabs">
<a href="#">
<p> First </p>
</a>
</div>
<div class="col-md-2 tabs">
<a href="#">
<p> Second </p>
</a>
</div>
<div class="col-md-2 tabs">
<a href="#">
<p> Third </p>
</a>
</div>
Stack Overflow用户
发布于 2016-07-14 20:39:50
试试这个..。
$(".tabs").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});它会将.active类分配给你点击的元素，然后你的CSS就会被应用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38374153
复制相关文章
相似问题