活动标签下的CSS箭头

时间：2015-12-22 17:02:50

标签： javascript css css3

删除了很多代码，使得这项工作只提供最低限度的工作。

我试图获得一个小箭头，该箭头位于每个方框的中心，但只有当标签位于其蓝色活动状态时才会显示。

我在第一个标签下编码了箭头。但是当标签处于蓝色活动状态时，我如何将此箭头居中并显示？

（注意JS可能不会在此演示中显示蓝色活动状态。）

＆＃13;
＆＃13; 
<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>
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

  • 我没有使用:pseudo元素来添加边框而是使用:hover label background-color更改了:pseudo而overflow:hidden元素是可见
  • 从父
    • 中删除absolute
  • 通过定位left:50% width并将箭头20px的一半移除，margin-left //Make first one active $(".tabs > li ").first().addClass("activeTab"); $(".tabs > li").click(function(e) { $(".activeTab ").removeClass("activeTab"); var _this = $(this); _this.addClass("activeTab"); });
    • ，将箭头置于中心位置

已移除

.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;
  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;
  position: relative;
}
.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 */

/* ARROW Controls */

Controls Active .tabs_accordion [id^="tab"]:checked + label {
  background: blue;
  color: #fff;
}
.activeTab {
  background-color: blue;
}
.tabs_accordion ul.tabs li label:after {
  content: '';
  width: 0;
  height: 0;
  top: 74px;
  left: 50%;
  bottom: 0;
  margin-left: -20px;
  border-color: blue transparent transparent transparent;
  border-style: solid;
  position: absolute;
  border-width: 20px;
  display: none;
}
.tabs_accordion ul.tabs li:hover label:after,
.tabs_accordion ul.tabs li.activeTab label:after {
  display: block;
}
.tabs_accordion ul.tabs li:hover label {
  border-left-color: transparent;
}
.tabs_accordion ul.tabs li:hover + li > label {
  border-left-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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 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>
{{1}}

答案 1 :(得分：0)

检查此代码。您不需要为箭头添加额外的div。说实话吧。

<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>



ul.tabs li {
  display: table-cell;
  cursor: pointer;
  width: 238px;

}

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;
      position: relative;
}

ul.tabs li label.active, ul.tabs li label:hover {
      background-color: blue;


}
ul.tabs li label:hover:after, ul.tabs li label.active:after{
    content:'';
    display:block;
    width: 0;
    height: 0;
    position:absolute;
    top: 100%;
    left: 50%;
    margin-left:-20px;
    border-color: blue transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
}








$(function(){  

  //Make first one active
  $(".tabs li label").first().addClass("active");

  $(".tabs li label").click(function(){
    $(".tabs li label").removeClass("active");
     $(this).addClass("active");
  });


})
相关问题
最新问题