当锚点元素被点击时触发事件

Triggering event when anchor element is clicked

本文关键字：事件 元素      更新时间：2023-09-26

我有一个这样的列表:

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

工作原理:

第一个列表项是默认打开的(它有一个"打开"类)，如果我点击"送货地址"(只有当我点击)类"打开"，它应用于"送货地址"。

我想做的是，当我点击旁边打开"送货地址"，如果我再次点击打开"审查订单"。

基本上，我需要做的是当"下一步"被点击时，例如强制点击"送货地址"。

我该怎么做?

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

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

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

例子小提琴

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>

相关文章：