Jquery 通过具有相同类的多个元素切换

我试图切换通过几个div元素与某个类。所有div都有相同的类“step”，通过单击按钮，类“active”应添加到第一个div上，下一次单击应删除“active”类并将其放在下一个div上，依此类推

html示例：

<button id="toggleNext">Next</button>
<div id="offer" class="step">
              <h2>Header -1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>
          <div id="skills" class="step">
              <h2>Header -2</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>
  <div id="service" class="step">
              <h2>Header -3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            </div>

我还不是职业选手，所以请原谅我拙劣的尝试，但我希望这能说明我想要达到的目标

$("#toggleNext").on("click",function() { 

    if( $(".step").first().hasClass("active") ) {
            $(".step").first().removeClass("active").next().addClass("active");

    } else if( $(".step").not(".step:first").hasClass("active") ) {
            $(".step").prevAll().removeClass("active");

    } else {
            $(".step").first().addClass("active").nextAll().removeClass("active");
    }
})

---

非常感谢您的帮助

您可以创建计数器，该计数器将在单击时递增，直到达到与

divs数相同的数值。步骤
divs，然后返回到0


var i=0；
$（'#toggleNext'）。单击（函数（）{
$（'.step'）.eq（i）.addClass（'active'）。同胞（'.step'）。removeClass（'active'）；
（i<$（'.step'）。长度-1）？i++:i=0；
});
.active{
背景：红色；
}

下一个
标题-1
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”

标题-2
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”

标题-3
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”

太棒了！非常感谢你！我知道它可以是如此的短而平滑，但我在这一点上不知道，太棒了！我对eq（）函数不是100%清楚-它类似于通过给定索引循环元素？不客气。是的，它通过索引从匹配元素组中选择元素，您可以在此处阅读更多内容
$("#toggleNext").on("click",function() { 

    if( $(".step").first().hasClass("active") ) {
            $(".step").first().removeClass("active").next().addClass("active");

    } else if( $(".step").not(".step:first").hasClass("active") ) {
            $(".step").prevAll().removeClass("active");

    } else {
            $(".step").first().addClass("active").nextAll().removeClass("active");
    }
})