当单击锚元素时触发事件

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>

它是如何工作的：

第一个列表项默认打开（具有“opened”类），如果我点击“Shipping address”（仅当我点击时），则“opened”类应用于“Shipping address”。

我想做的是，当我点击下一步以打开“Shipping address”时，如果我再次点击，则打开“Review Order”。

基本上，我需要做的就是在单击“下一步”时强制单击“Shipping address”。

如何做到这一点？

- agis

---

你不需要触发事件。只需监听你的“按钮”的click事件并在处理程序中移动opened类。你试过了吗？ - Bergi

Answer 1

您可以使用addClass()和removeClass()来设置所需的类，使用next()获取下一个li元素。尝试以下代码：

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

如果必要的话，您需要实现一些逻辑来防止用户超过第三个li元素。 示例Fiddle

- Rory McCrossan

---

我的情况出现了一些奇怪的问题，如果我点击“下一页”按钮，就会出现“未捕获的类型错误：$不是一个函数”的提示。 - agis

您需要在页面中引入 jquery.js。 - Rory McCrossan

现在正在工作，终于成功了！谢谢！ - agis

快速问题：当打开最后一个元素时如何移除“下一个”按钮，如果不是则添加回来？ - agis

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>

- M.M.H.Masud