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

您可以使用toggleClass從jQuery的。

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

Answer 2

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

.active { 
 
    color: green; 
 
}

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

Answer 3

它只是簡單地用下面的代碼工作。你可以用單行代碼來完成。

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

.active { 
 
    color: green; 
 
}

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