使用按钮自动点击选项卡 Jquery

Question

我有 html 个选项卡和一个继续购物按钮。每个选项卡都包含很少的产品。当我们默认打开页面时，第一个选项卡会打开。要求是当我们点击继续购物按钮时，用户将自动转到下一个选项卡，比如 tab2、tab3，然后完成，即用户在单击继续购物按钮后必须遍历每个选项卡。这是我的标签代码

<ul class="tabs-menu">
<li class="current"><a href="#tab-1">Warranty</a></li>
<li class=""><a href="#tab-2">Accessories</a></li>
<li class=""><a href="#tab-3">Software</a></li>
</ul>

<div class="tab-content" id="tab-1">
    Content of Tab 1
</div>  

<div class="tab-content" id="tab-2">
    Content of Tab 2
</div>  

<div class="tab-content" id="tab-3">
    Content of Tab 3
</div>  

<a href="#" id="continue-shopping">Continue Shopping</a>

标签的完整代码在这里： http://jsfiddle.net/syahrasi/us8uc/

Answer 1

在您的 javascript 代码中使用简单的设置器 $( ".tab-content" ).tabs( "option", "active", 1 ); 有关详细信息，请查看 api 文档 http://api.jqueryui.com/tabs/

Answer 2

您的按钮可以有执行此操作的点击事件：

$("a[href='#tab-2']").trigger('click');

将#tab-2 替换为您希望通过按钮打开的任何选项卡

--编辑--

您的按钮逻辑将查看选项卡序列并在末尾加 1，直到没有更多选项卡可供遍历。或者，在每个选项卡内容中有一个 "Continue Shopping" 按钮向前移动

Answer 3

我在这里做了一个快速演示，它会尝试找到下一个选项卡，请查看更多详细信息，如果您需要的话：

demo http://jsfiddle.net/Us8uc/4696/

使用按钮自动点击选项卡 Jquery

Click automatically on Tabs Jquery with button

javascript

each

jquery

jquery-plugins

jquery-events