改变div类活跃

Question

我有以下带有div标签的ul标签

<ul class="timeline">
  <li onclick="showThis(1);" class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker timeline__step__marker--red active></div>
    </div>
    <div class="timeline__time">
      Isert Code
    </div>
  </li>
  <li onclick="showThis(2);" class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker timeline__step__marker--red></div>
    </div>
    <div class="timeline__time">
      Select Layout
    </div>
  </li>
  <ul>

$('selector').on('click', function() {
  $('selector').removeClass('active');
  $(this).addClass('active');
});

点击后如何将.timeline__step__marker timeline__step__marker--red更改为.timeline__step__marker timeline__step__marker--red.active？

该脚本对我不起作用

Answer 1

您可以使用jQuery中的toggleClass。

$(".timeline__step__marker timeline__step__marker--red").on('click', function(){
    $(".timeline__step__marker timeline__step__marker--red").removeClass('active');
    $(this).toggleClass('active');
});

Answer 2

＆＃13;

＆＃13;

$('ul').on('click', '.timeline__step__marker', function(e){
  var $this = $(e.target);
  
  $this.addClass('active');
  $('.timeline__step__marker').not($this).removeClass('active');
});

＆＃13;

.active {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <li class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker timeline__step__marker--red active">Blah1</div>
    </div>
    <div class=" timeline__time ">
      Isert Code
    </div>
  </li>
  <li class="timeline__item ">
    <div class="timeline__step ">
      <div class="timeline__step__marker timeline__step__marker--red">Blah2</div>
    </div>
    <div class="timeline__time">
      Select Layout
    </div>
  </li>
  <ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

它只适用于以下代码。您可以使用单行代码执行此操作。

＆＃13;

＆＃13;

$('ul').on('click', '.timeline__step__marker', function(e){
  $(e.target)
    .addClass('active')
    .closest('li')
    .siblings()
    .find('.timeline__step__marker')
    .removeClass('active');
});

＆＃13;

.active {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <li class="timeline__item">
    <div class="timeline__step">
      <div class="timeline__step__marker timeline__step__marker--red active">Blah1</div>
    </div>
    <div class=" timeline__time ">
      Isert Code
    </div>
  </li>
  <li class="timeline__item ">
    <div class="timeline__step ">
      <div class="timeline__step__marker timeline__step__marker--red">Blah2</div>
    </div>
    <div class="timeline__time">
      Select Layout
    </div>
  </li>
  <li class="timeline__item ">
    <div class="timeline__step ">
      <div class="timeline__step__marker timeline__step__marker--red">Blah2</div>
    </div>
    <div class="timeline__time">
      Select Layout
    </div>
  </li>
  <li class="timeline__item ">
    <div class="timeline__step ">
      <div class="timeline__step__marker timeline__step__marker--red">Blah2</div>
    </div>
    <div class="timeline__time">
      Select Layout
    </div>
  </li>
  <li class="timeline__item ">
    <div class="timeline__step ">
      <div class="timeline__step__marker timeline__step__marker--red">Blah2</div>
    </div>
    <div class="timeline__time">
      Select Layout
    </div>
  </li>
  <ul>

＆＃13;

＆＃13;

＆＃13;