的jQuery的onclick添加类和删除，但它不工作

Question

要通过jQuery的删除和添加活动类

$(document).ready(function() { 
 
$('.list-tech li').bind('click', function(event) { 
 
    var className = $(this).attr('class'); 
 
    $(this).parent().find('li.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('.tech-details').hide(); 
 
    $('#' + className).show(); 
 
    $('.tech-details').removeClass('active mo-active').parent().addClass('active'); 
 
    $('#' + className).addClass('active mo-active').parent().addClass('active'); 
 
});});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="part-deta"> 
 
    <div class="da-one"> 
 
     <img src="img/techno-1.png"> 
 
     <p class="for-desktop">Acque primarie</p> 
 
    </div> 
 
    <div class="da-two"> 
 
     <p class="for-mobile">Acque primarie</p> 
 
     <ul class="list-tech"> 
 
      <li class="tech-1 active"> 
 
       <span>Ifisici</span> 
 
      </li> 
 
      <li class="tech-2"> 
 
       <span>MBR</span> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="da-three active"> 
 
     <div id="tech-1" class="tech-details" style="display: none;"> 
 
      <img src="img/techno-4.jpg"> 
 
      <p>1. I reflui prodotti</p> 
 
     </div> 
 
     <div id="tech-2" class="tech-details" style=""> 
 
      <img src="images/techno-4.jpg"> 
 
     </div> 
 
    </div> 
 
</div>

第一次单击添加活动类 但是当点击了第二次活动类没有添加 我的代码有什么问题？

Answer 1

我认为你正在试图做到这一点：

$(document).ready(function() { 
 
$('.list-tech li').bind('click', function(event) { 
 
    var className = $(this).attr('class'); 
 
    $(this).parent().find('li.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('.tech-details').hide(); 
 
    $('#' + className).show(); 
 
    $('.tech-details').removeClass('active mo-active').parent().addClass('active'); 
 
    $('#' + className).addClass('active mo-active').parent().addClass('active'); 
 
});});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="part-deta"> 
 
    <div class="da-one"> 
 
     <img src="img/techno-1.png"> 
 
     <p class="for-desktop">Acque primarie</p> 
 
    </div> 
 
    <div class="da-two"> 
 
     <p class="for-mobile">Acque primarie</p> 
 
     <ul class="list-tech"> 
 
      <li class="tech-1 active"> 
 
       <span>Ifisici</span> 
 
      </li> 
 
      <li class="tech-2"> 
 
       <span>MBR</span> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="da-three active"> 
 
     <div id="tech-1" class="tech-details" style="display: none;"> 
 
      <img src="img/techno-4.jpg"> 
 
      <p>1. I reflui prodotti</p> 
 
     </div> 
 
     <div id="tech-2" class="tech-details" style="display: none;">Test Image 
 
      <img src="/images/techno-4.jpg"> 
 
     </div> 
 
    </div> 
 
</div>