在Tabs上使用Javascript的活动状态

Is there a way to use Javascript so that when the page loads by default, it has the first tab colored dark green. Also, once you click the tabs the active state changes to dark green. I have it set up in the CSS so that the hover state changes to dark green, but I need an active state using JavaScript.

有没有办法使用Javascript,以便默认情况下加载页面时,它有第一个颜色为深绿色的选项卡。此外,单击选项卡后,活动状态将变为深绿色。我在CSS中设置它,以便悬停状态变为深绿色,但我需要使用JavaScript的活动状态。

Thank you so much for the help! I stripped a lot of code out of this.

非常感谢你的帮助!我从中删除了很多代码。

.tabs_accordion {
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}


.tabs_accordion > input {
  /*position: relative;
  left: -50000px;
  height: 0px;
  line-height: 0;*/
  display: none;
}

.tabs_accordion > input:nth-child(1):checked ~ ul.tabs > li:nth-of-type(1) {
  font-weight: bold;
}
.tabs_accordion > input:nth-child(1):checked ~ div.content > label:nth-of-type(1) {
  font-weight: bold;
  margin-bottom: 0;
}
.tabs_accordion > input:nth-child(1):checked ~ div.content > div:nth-of-type(1) {
  display: block;
  border-top: none;
  background-image:url(picture-1.jpg);
  min-height: 380px;
	background-repeat:no-repeat;
 	-webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}
.tabs_accordion > input:nth-child(2):checked ~ ul.tabs > li:nth-of-type(2) {
  font-weight: bold;
}
.tabs_accordion > input:nth-child(2):checked ~ div.content > label:nth-of-type(2) {
  font-weight: bold;
  margin-bottom: 0;
}
.tabs_accordion > input:nth-child(2):checked ~ div.content > div:nth-of-type(2) {
  display: block;
  border-top: none;
  background-image:url(picture-2.jpg);
  min-height: 380px;
	background-repeat:no-repeat;
 	-webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}
.tabs_accordion > input:nth-child(3):checked ~ ul.tabs > li:nth-of-type(3) {
  font-weight: bold;
}
.tabs_accordion > input:nth-child(3):checked ~ div.content > label:nth-of-type(3) {
  font-weight: bold;
  margin-bottom: 0;
}
.tabs_accordion > input:nth-child(3):checked ~ div.content > div:nth-of-type(3) {
  display: block;
  border-top: none;
  background-image:url(picture-3.jpg);
  min-height: 380px;
	background-repeat:no-repeat;
 	-webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}



.tabs_accordion ul.tabs {
  display: table;
  width: 100%;
  display: none;
  background-color: #deeab4;
  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:#333333;
  font-size: 16px;
}
.tabs_accordion ul.tabs li {
  display: table-cell;
  cursor: pointer;
  width: 238px;
  
}

.tabs_accordion ul.tabs li label:active {
	  background-color: #8cd600;
	
}


/* begin controls hover */
.tabs_accordion [id^="tab"]:checked + label {
  background: green;
}
/* end controls hover */

.tabs_accordion ul.tabs li label {
  display: block;
  height: 74px;
  padding: 20px;
  text-align: center;
  border-left: 2px solid #c8c8c8;
  margin: 0px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
}
.tabs_accordion ul.tabs li label:focus {
  background-color: #8cd600;
}
.tabs_accordion ul.tabs li label:active {
  background-color: #8cd600;
}
.tabs_accordion ul.tabs li:hover {
  background-color: #8cd600;
   color:#FFFFFF;
}

.tabs_accordion ul.tabs li:hover label {
  border-left-color: transparent;
}
.tabs_accordion ul.tabs li:hover + li > label {
  border-left-color: transparent;
}
.tabs_accordion ul.tabs li:first-child label {
  border-left-color: transparent;
}
.tabs_accordion div.content > label {
  display: block;
  background-color: #deeab4;
  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;
  }

<div class="tabs_accordion">

<input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" />
<input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" 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>
    <div class="tab_1_content">
      
    </div>
      
    <label for="tab_2_content_control">Option 2</label>
    <div class="tab_2_content">
    </div>  
    
    <label for="tab_3_content_control">Option 3</label>
    <div class="tab_3_content">
    </div>    
    
  </div>
</div>

1 个解决方案

#1

Add a new css class for active tab

为活动选项卡添加新的css类

.activeTab
{  
   background-color: green;
}

And in your document ready event, you can get the first tab item(li element) and then add this new css class to that. Also when user clicks, remove the current active class and set the activeTab class to the newly clicked item.

在您的文档就绪事件中,您可以获取第一个选项卡项(li元素),然后将此新的css类添加到该项。此外,当用户单击时,删除当前活动类并将activeTab类设置为新单击的项。

$(function(){  

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

  $(".tabs>li").click(function(e){

    var _this = $(this); 

    //Remove existing active one  
    $(".activeTab").removeClass("activeTab");   

   //Set the css class to the clicked one
     _this.addClass("activeTab");

  });


})

Here is a working sample.

这是一个工作样本。

#1