Question

我有一个这样的清单：

<ul class="titles clearfix">

 <li class="opened">Billing Address</li>
 <li class="">Shipping Address</li>
 <li class="">Review Order</li>

</ul>

还有一个按钮：

<a href="#">Next</a>

工作原理：

默认情况下会打开第一个列表项（它有一个“已打开”类），如果我点击“送货地址”（仅当我点击），“打开”这个类就会应用到“送货地址”。

我想要做的是，当我点击旁边打开“送货地址”时，如果我再次点击打开“查看订单”。

基本上，我需要做的是点击“下一步”以强行点击“送货地址”。

我该怎么做？

Answer 1

您可以使用addClass()和removeClass()根据需要设置类，并使用next()获取以下li元素。试试这个：

$('a').click(function(e) {
    e.preventDefault();    
    $('li.opened').removeClass('opened').next().addClass('opened');
});

如果需要，您需要实现一些逻辑以防止用户超过第三个li元素。

Example fiddle

Answer 2

＆＃13;

var i = 2 ;
var len = $("ul li").length;

$('a').on('click', function(){    
    $("ul li.opened").removeClass('opened');
    $("ul li:nth-child("+ i +")").addClass('opened');
console.log(i, len);
    
    if (i == len) {
        i = 1;
    }else{
        i++;
    }
    
});

＆＃13;

.opened{
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<ul class="titles clearfix">

 <li class="opened">Billing Address</li>
 <li class="">Shipping Address</li>
 <li class="">Review Order</li>

</ul>

<a href="#">Next</a>

＆＃13;

单击锚元素时触发事件

2 个答案: