触发器点击jQuery中的下一个选项卡

时间:2018-02-19 11:47:36

标签: javascript jquery

如何触发点击jQuery中的下一个标签,我已经尝试了下面的代码,但没有工作,TIA。

float left = 30;
float right = 30;
float top = 85;
float bottom = 20;        

Document document = new Document( PageSize.A4, left, right, top, bottom );
var c = $('ul#tabs li').length;
var selected = parseInt($('ul#tabs li.active').index())+1;
if (c != selected) {
  $("ul#tabs li:nth-child(" + selected + ")").click();
  return false;
}

1 个答案:

答案 0 :(得分:2)

我有点不清楚什么不起作用,但下面的简化代码是获取当前标签和下一个标签所需的全部内容:



$(document).ready(function() {
  let currentTab = $('ul#tabs li.active');
  let nextTab = currentTab.next();

  // Once you have the tab, click it (clicking after 2 seconds to demonstrate)
  setTimeout(function() { nextTab.find("a").get(0).click()}, 2000);

  // If you need to do things when a tab is clicked, create an event handler
  $('a[data-toggle="tab"]').click(function(event) {
    // Do something when a tab is clicked
    // For example: Remove active class, and add it to active element
    $('a[data-toggle="tab"]').parent().removeClass("active");

    // Add active class to clicked li
    $(this).parent().addClass("active");
  });
});

.active a {
  color: green !important;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mytabs">
  <ul class="nav nav-tabs" id="tabs">
    <li class="active"><a data-toggle="tab" href="#Personal" aria-expanded="false">Personal</a></li>
    <li><a data-toggle="tab" href="#Business">Business</a></li>
    <li><a data-toggle="tab" href="#Documents" aria-expanded="true">Documents</a></li>
    <li><a data-toggle="tab" href="#References">References</a></li>
    <li><a data-toggle="tab" href="#OrderDelivery">Order &amp; Delivery</a></li>
  </ul>
</div>
&#13;
&#13;
&#13;