单击锚元素时触发事件

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>

工作原理：

默认打开第一个列表项（它的 class 为 "opened"），如果我单击 "Shipping address"（仅当我单击时），class "opened" 它应用于 "Shipping address"。

我想做的是，当我点击下一步打开"Shipping address"，如果我再次点击打开"Review Order"。

基本上，我需要做的是当点击"next"时强制点击"Shipping address"。

我该怎么做？

Answer 1

可以根据需要使用addClass()和removeClass()设置class，next()得到后面的li元素。试试这个：

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

如果需要，您需要实施一些逻辑来防止用户越过第三个 li 元素。

Example fiddle

Answer 2

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++;
    }
    
});

.opened{
    color:red;
}

<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>

单击锚元素时触发事件

Triggering event when anchor element is clicked

javascript

jquery

javascript-events