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>