更改非活动类的活动类并仅申请所选元素 [英] Change inactive class active class and apply for selected element only

问题描述

在给定的示例中，我对未选择的链接元素使用了.inactive类，我想将.inactive转换为.active并应用于active链接元素，这意味着列表中将只有一个.active.

in given example I used class .inactive for not selected link element, I want to convert .inactive to .active and apply to active link element, means there will be only one .active in list.

HTML:

<div class="tab-header clearfix">
  <ul id="tabs">
    <li><a id="tab1">About the App</a></li>
    <li><a id="tab2">PLO</a></li>
    <li><a id="tab3">Prerequisites</a></li>
  </ul>
</div>

<div class="tab-container" id="tab1C">
  tab-container 1
</div>

<div class="tab-container" id="tab2C">
  tab-container 2
</div>

<div class="tab-container" id="tab3C">
  tab-container 3
</div>

CSS:

.tab-header {
  background: white;
  border-bottom: 1px solid #ededed;
}
.tab-header #tabs {
  width: 100%;
  height: 30px;
}
.tab-header #tabs li {
  float: left;
  list-style: none;
  width: 30%;
  box-sizing: border-box;
}
.tab-header #tabs li a {
  color: #ffffff;
  padding: 0 5px;
  display: block;
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  cursor: pointer;
  background: blue;
}
.tab-header #tabs li a.inactive {
  color: blue;
  background: white;
}
.tab-header .tab-container {
  clear: both;
  width: 100%;
  padding-top: 20px;
}

jQuery:

$('#tabs li a:not(:first)').addClass('inactive');
                $('.tab-container').hide();
                $('.tab-container:first').show();

                $('#tabs li a').click(function(){
                    var t = $(this).attr('id');
                    if($(this).hasClass('inactive')){ //this is the start of our condition 
                    $('#tabs li a').addClass('inactive');           
                    $(this).removeClass('inactive');

                    $('.tab-container').hide();
                    $('#'+ t + 'C').fadeIn('slow');
                 }
                });

JSFiddle Here

JSFiddle Here

推荐答案

尝试一下

$('#tabs li a').click(function(){
      var t = $(this).attr('id');

      if(!$(this).hasClass('active')){ //this is the start of our condition 

                    $('#tabs li a').removeClass('active').addClass('inactive');           
                    $(this).removeClass('inactive').addClass('active');

                    $('.tab-container').hide();
                    $('#'+ t + 'C').fadeIn('slow');
                 }
                });

https://jsfiddle.net

这篇关于更改非活动类的活动类并仅申请所选元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！