我想知道是否有可能用jQuery创建类似prev/next导航的东西,在那里它用同一个类索引所有的div。为了尝试这个,我创建了一个非常基本的小提琴。
HTML:
<ul class="list-inline">
<li><a href="#" class="prevtrigger">PREV</a></li>
<li><a href="#" class="nexttrigger">NEXT</a></li>
</ul>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="col-md-6">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
</div>
我还创建了一个基本的jQuery操作来更改框的颜色:
$( document ).ready(function() {
$('.prevtrigger').click(function(){
$( '.box' ).css("background-color", "blue")
});
$('.nexttrigger').click(function(){
$( '.box' ).css("background-color", "green")
});
});
现在的问题是我如何管理颜色一个又一个红色或绿色的div取决于它的实际索引。有人有想法吗?看看我的小提琴:HERE!
1条答案
按热度按时间zengzsys1#
看看下面的jQuery函数:
示例:
您可以向当前元素添加一个“活动”类,并使用prev和next函数进行切换。
Jsfiddle