【发布时间】：2015-12-22 17:02:50
【问题描述】：
删除了许多使这项工作仅提供最低限度的代码。
我正在尝试获得一个小箭头，该箭头将在每个框下居中，但只有当标签处于蓝色活动状态时才。
我在第一个标签下找到了箭头。但是，当标签处于蓝色活动状态时，如何将此箭头和使其显示它会显示它？
（请注意，此演示中 JS 可能不会显示蓝色活动状态。）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//Make first one active
$(".tabs>li").first().addClass("activeTab");
$(".tabs>li").click(function(e){
$(".activeTab").removeClass("activeTab");
var _this = $(this);
_this.addClass("activeTab");
});
})
</script> .tabs_accordion {
display: block;
margin: 0 auto;
max-width: 1200px;
}
.tabs_accordion > input {
display: none;
}
.tabs_accordion ul.tabs {
display: table;
width: 100%;
display: none;
background-color: green;
padding: 0;
margin: 0;
overflow: hidden;
box-sizing: border-box;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
color: #7EE8FF;
font-size: 16px;
}
.tabs_accordion ul.tabs li {
display: table-cell;
cursor: pointer;
width: 238px;
}
.tabs_accordion ul.tabs li label:active {
background-color: blue;
}
.tabs_accordion ul.tabs li label {
display: block;
height: 74px;
padding: 20px;
text-align: center;
border-left: 2px solid yellow;
margin: 0px 0;
box-sizing: border-box;
cursor: pointer;
font-weight: bold;
}
.tabs_accordion ul.tabs li label:focus {
background-color: blue;
}
.tabs_accordion ul.tabs li label:active {
background-color: blue;
}
.tabs_accordion ul.tabs li:hover {
background-color: blue;
color:#FFFFFF;
}
.tabs_accordion div.content > label {
display: block;
background-color: green;
padding: 20px;
margin-bottom: 1em;
cursor: pointer;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
text-align:center;
}
.tabs_accordion div.content > div {
display: none;
padding: 10px;
margin-bottom: 1em;
}
.tabs_accordion ul.tabs {
display: table;
}
.tabs_accordion div.content > label {
display: none;
}
.tabs_accordion div.content > div {
margin-bottom: 0;
}
/* For Java */
.activeTab
{
background-color: blue;
}
/* ARROW Controls */
Controls Active
.tabs_accordion [id^="tab"]:checked + label {
background: blue;
color: #fff;
}
#tabarrow {
width:0;
height:0;
top:74px;
left:20px;
border-color:blue transparent transparent transparent;
border-style:solid;
border-width:20px;
}
.tabs_accordion ul.tabs li:hover label {
border-left-color: transparent;
}
.tabs_accordion ul.tabs li:hover + li > label {
border-left-color: transparent;
}
<div class="tabs_accordion">
<input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" />
<input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" />
<input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" />
<ul class="tabs">
<li><label for="tab_1_content_control">Option 1</label></li>
<li><label for="tab_2_content_control">Option 2</label></li>
<li><label for="tab_3_content_control">Option 3</label></li>
</ul>
<div id="tabarrow"></div>
<div class="content">
<label for="tab_1_content_control">Option 1</label>
<label for="tab_2_content_control">Option 2</label>
<label for="tab_3_content_control">Option 3</label>
</div>
</div>【问题讨论】：
-
我会在每个标签上使用一个伪元素，而不是这里的实际 div。
标签： javascript css