Question

我正在尝试添加一个活动的类，每次点击一个链接但是现在，只有在我双击它时它才会添加。

这是我的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul>
  <li><a href="#">Deposit</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Credit</a></li>
</ul>
  <div class="box active" id="deposit">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  <div class="box" id="account">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  <div class="box" id="credit">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>

</div>
<div id="random">
  <p>This is a random text</p>
</div>

CSS：

li{
  list-style:none;
  color: white;
  width: 30%;
  a{
    color: white;
    text-decoration: none;
    &:hover{
      color: blue;
    }  
  }

}
ul{
  background: black;
  padding: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center;
}
.box{
  height: 200px;
}
#deposit{
  background: green;
}
#account{
  background: pink;
}
#credit{
  background: blue;
}
li a.active{
  color: red;
}

JS：

$(document).ready(function(){

  $('div.box').hide();
  $('li a').on("click", function(){

    if(!$('li a').hasClass('active')){   
      $(this).addClass('active');   
    }
    else{
      $('li a').removeClass('active');
    }
  });  
});

这是我的笔：http://codepen.io/Sidney-Dev/pen/MbyXvP

当我点击它时如何将该类激活添加到链接并从任何其他链接中删除该相同的类（如果存在）？希望你能帮忙。

Answer 1

只需从所有active中移除a课程，然后添加active课程，点击a，如下所示。

$('div.box').hide();
$('li a').on("click", function() {
    $('li a').removeClass('active');
    $(this).addClass('active');

    $('div.box').hide();
    var index = $(this).parent().index();
    $('div.box').eq(index).show();
});

UPDATED CODEPEN

Answer 2

＆＃13;

$(document).ready(function(){
  
  $('div.box').hide();
  $('li a').on("click", function(){
      $('li a').not($(this)).removeClass('active');

      $(this).toggleClass('active');   
  });  
});

＆＃13;

li{
  list-style:none;
  color: white;
  width: 30%;
  a{
    color: white;
    text-decoration: none;
    &:hover{
      color: blue;
    }  
  }
  
}
ul{
  background: black;
  padding: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center;
}
.box{
  height: 200px;
}
#deposit{
  background: green;
}
#account{
  background: pink;
}
#credit{
  background: blue;
}
li a.active{
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
<ul>
  <li><a href="#">Deposit</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Credit</a></li>
</ul>
  <div class="box active" id="deposit">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  <div class="box" id="account">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  <div class="box" id="credit">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  
</div>
<div id="random">
  <p>This is a random text</p>
</div>

＆＃13;

Answer 3

您应该只修改发生点击的元素。你可以这样做。

$(document).ready(function() {

  $('div.box').hide();
  $('li a').on("click", function(event) {
    let $ele = $(event.target);
    $('li a').not($ele).removeClass('active');
    $ele.toggleClass('active')
  });
});

li {
  list-style: none;
  color: white;
  width: 30%;
  a {
    color: white;
    text-decoration: none;
    &: hover {
      color: blue;
    }
  }
}
ul {
  background: black;
  padding: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center;
}
.box {
  height: 200px;
}
#deposit {
  background: green;
}
#account {
  background: pink;
}
#credit {
  background: blue;
}
li a.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
  <ul>
    <li><a href="#">Deposit</a>
    </li>
    <li><a href="#">Account</a>
    </li>
    <li><a href="#">Credit</a>
    </li>
  </ul>
  <div class="box active" id="deposit">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  <div class="box" id="account">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>
  <div class="box" id="credit">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p>
  </div>

</div>
<div id="random">
  <p>This is a random text</p>
</div>

Answer 4

您必须首先删除现有的活动类，然后在click事件上添加相同的类。

$(document).ready(function(){
   $('div.box').hide();
   $('li a').on("click", function(){
      $('li a').removeClass('active'); 
      $(this).addClass('active');     
   }); 
});

仅在一次单击时添加活动类

4 个答案: