变化DIV类活跃

我有div标签下面的UL标签变化DIV类活跃

<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单击时？

的脚本不工作对我来说

来源

2017-07-21 Shaugi Muhammad

您可以使用toggleClass从jQuery的。

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

来源

2017-07-21 19:11:01 cssBlaster21895

$('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>

来源

2017-07-21 19:15:34 Taplar

它只是简单地用下面的代码工作。你可以用单行代码来完成。

$('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>

来源

2017-07-22 11:41:37

变化DIV类活跃

回答

相关问题