我有几个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>
但是颜色并没有改变。有人能告诉我代码出了什么问题吗?
发布于 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>
发布于 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>
发布于 2016-07-14 20:39:50
试试这个..。
$(".tabs").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
它会将.active
类分配给你点击的元素,然后你的CSS就会被应用。
https://stackoverflow.com/questions/38374153
复制相似问题