jQuery的组类活性，并删除所有其他活动类

问题描述：

我创建一个步骤的向导和每次我按下“下一步”按钮的步骤向导应去除步骤1活性，并设置下一个有效步骤2jQuery的组类活性，并删除所有其他活动类

我写了这个：

的jQuery：

$('#goto-step-four').click(function() { 
    $("#step-one").removeClass(); 
    $("#step-two").removeClass(); 
    $("#step-three").removeClass(); 
    $("#step-four").toggleClass('active'); 
    $("#step-five").removeClass(); 
});

步骤向导：

<div class="row"> 
     <div class="col-xs-12"> 
      <ul class="nav nav-pills nav-justified thumbnail"> 
      <li id ="step-one" class="active"><a id="step-one-button"> 
        <h4 class="list-group-item-heading">Stap 1</h4> 
        <p class="list-group-item-text">NAW gegevens klant</p> 
       </a></li> 
       <li id ="step-two" class=""><a id="step-two-button"> 
        <h4 class="list-group-item-heading">Stap 2</h4> 
        <p class="list-group-item-text">Selecteer een type</p> 
       </a></li> 
       <li id="step-three" class=""><a id="step-three-button"> 
        <h4 class="list-group-item-heading">Stap 3</h4> 
        <p class="list-group-item-text">Breedte en hoogte</p> 
       </a></li> 
       <li id="step-four" class=""><a id="step-four-button"> 
        <h4 class="list-group-item-heading">Stap 4</h4> 
        <p class="list-group-item-text">Extra's</p> 
       </a></li> 
       <li id="step-five" class="disabled"><a id="step-five-button"> 
        <h4 class="list-group-item-heading">Stap 5</h4> 
        <p class="list-group-item-text">Controleer gegevens</p> 
       </a></li> 
      </ul> 
     </div> 
</div>

我认为这有点麻烦，应该有更好的方法来做到这一点。我能做些什么来使这个更清洁？

此代码是否在事件处理程序中？ –

是的。我会更新我的代码 – itvba

在这里显示你的html –

答

实现此目的的最简单方法是在要分组的所有元素上放置一个通用类。然后，您可以一起呼叫removeClass()，同时呼叫addClass()到您要定位的元素。事情是这样的：

$('#goto-step-four').click(function() { 
 
    $('.active').removeClass('active'); 
 
    $('#step-four').addClass('active'); 
 
});

.active { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="goto-step-four">Step 4</button><br /><br /> 
 

 
<div class="step" id="step-one">One</div> 
 
<div class="step" id="step-two">Two</div> 
 
<div class="step" id="step-three">Three</div> 
 
<div class="step" id="step-four">Four</div> 
 
<div class="step" id="step-five">Five</div>

采取此基础上更进一步，你可以抹干，这样就可以在所有的“去X一步”按钮，使用一个单一的点击处理程序：

$('.goto').click(function() { 
 
    $('.step').removeClass('active').eq($(this).index('.goto')).addClass('active'); 
 
});

.active { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="goto">Step 1</button> 
 
<button class="goto">Step 2</button> 
 
<button class="goto">Step 3</button> 
 
<button class="goto">Step 4</button> 
 
<button class="goto">Step 5</button><br /><br /> 
 

 
<div class="step-container"> 
 
    <div class="step">One</div> 
 
    <div class="step">Two</div> 
 
    <div class="step">Three</div> 
 
    <div class="step">Four</div> 
 
    <div class="step">Five</div> 
 
</div>

谢谢！这工作像一个魅力:) – itvba

答

尝试this solution：

<div class="step active">Step One</div> 
<div class="step">Step Two</div> 
<div class="step">Step Three</div> 
<div class="step">Step Four</div> 
<div class="step">Step Five</div> 

function nextStep() { 
    var activeStep = $('.active'); 
    $('.step').removeClass('active'); 
    activeStep.next('.step').addClass('active'); 
}

您只需要保存活动状态，从所有状态中删除活动状态，然后应用到下一步。

jQuery的组类活性，并删除所有其他活动类

相关推荐