我在文档中有几个部分如下:
<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>
如何根据显示的部分切换活动类?
答案 0 :(得分: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);
答案 1 :(得分:0)
我已为动画添加了一个按钮。您需要显示更多示例代码,但是您可以使用let $section = $('section:visible')
而不是将其置于单击函数中,而是创建一个通用函数名称,只要您的名称被触发事件发生。
$('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;