Question

我在文档中有几个部分如下：

<section id="step1">
</section>

<section id="step2" style="display:none">
</section>

<section id="step3" style="display:none">
</section>

我根据用户互动显示和隐藏这些内容。我希望有一些圆形标题来表示用户在第2节中的第3节，例如：

        <div id="indicators" class="clearfix">
        <div class="center-div">
            <ul>
                <li id="step1-circle" class="circle active"></li>
                <li id="step2-circle" class="circle"></li>
                <li id="step3-circle" class="circle"></li>
            </ul>
        </div>
    </div>

如何根据显示的部分切换活动类？

Answer 1

您可以使用addClass()方法与removeClass()方法一起使用，如：

function makeIndicatorCircleActive(id){

   // Remove active state of current circle
   $('#indicators .active').removeClass('active');

   // Add active state to desired element
   $(id).addClass('active');

}

// Somewhere else in the code...
makeIndicatorCircleActive('#step2-circle);

Answer 2

我已为动画添加了一个按钮。您需要显示更多示例代码，但是您可以使用let $section = $('section:visible')而不是将其置于单击函数中，而是创建一个通用函数名称，只要您的名称被触发事件发生。

＆＃13;

$('button').click(function() {
  // context used for jQuery
  let $section = $(this).closest('section');

  // get next circle, if current circle is last, then get first circle
  var $next = $('.circle.active', $section).next('.circle'),
    $next = ($next.length && $next) || $('.circle', $section).first();

  $('.circle.active', $section).removeClass('active'); // remove all actives
  $next.addClass('active'); // add new active
});

＆＃13;

.circle {
  background:            black;
  border-radius:         25px;
  display:               inline-block;
  list-style-type:       none;
  width:                 50px;
  height:                50px;
  -moz-border-radius:    25px;
  -webkit-border-radius: 25px;
}

.active {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="clearfix">
    <div class="center-div">
      <ul>
        <li class="circle active"></li>
        <li class="circle"></li>
        <li class="circle"></li>
      </ul>
    </div>
    <button>Next</button>
  </div>
</section>
<section>
  <div class="clearfix">
    <div class="center-div">
      <ul>
        <li class="circle active"></li>
        <li class="circle"></li>
        <li class="circle"></li>
      </ul>
    </div>
    <button>Next</button>
  </div>
</section>

＆＃13;

jQuery切换活动类取决于显示的部分

2 个答案: