Question

在这里，我尝试了多种方法来单击按钮时转到下一个选项卡，但是这里没有用，这是我的代码。

$(".login_button").click(function() {
var active = $( "#tab" ).tabs( "option", "active" );
$( "#tab" ).tabs( "option", "active", active + 1 );
});

我在这里使用的jQuery如下

 <script src="<?php echo base_url();?>assets/frontend/js/jquery-3.1.1.min.js"></script>

这是我的标签页眉

<div class="wizard-navigation" id="tab">
  <div class="progress-with-circle">
    <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 15%;"></div>
  </div>
  <ul>
    <li>
      <a href="#type" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-direction-alt"></i> </div>
        Type </a>
    </li>
    <li>
      <a href="#plan" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-map"></i> </div>
        Plan </a>
    </li>
    <li>
      <a href="#date_time" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-panel"></i> </div>
        Date Time </a>
    </li>
    <li>
      <a href="#details" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-comments"></i> </div>
        Details </a>
    </li>

    <li>
      <a href="#conform" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-check-box"></i> </div>
        Conform </a>
    </li>
  </ul>
</div>

搜索时发现我写的代码很完美，但对我不起作用，请帮助我解决问题

Answer 1

您需要具有要链接到的标签的ID的元素。换句话说，您需要使用和标签来查看其内容：

$(function() {
  $("#tab").tabs();
  $(".login_button").click(function() {
    var active = $("#tab").tabs("option", "active");
    $("#tab").tabs("option", "active", active + 1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery.ui.tabs.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery.ui.tabs.min.css" />

<div class="wizard-navigation" id="tab">
  <div class="progress-with-circle">
    <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 15%;"></div>
  </div>
  <ul>
    <li>
      <a href="#type" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-direction-alt"></i> </div>
        Type </a>
    </li>
    <li>
      <a href="#plan" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-map"></i> </div>
        Plan </a>
    </li>
    <li>
      <a href="#date_time" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-panel"></i> </div>
        Date Time </a>
    </li>
    <li>
      <a href="#details" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-comments"></i> </div>
        Details </a>
    </li>

    <li>
      <a href="#conform" data-toggle="tab">
        <div class="icon-circle"> <i class="ti-check-box"></i> </div>
        Conform </a>
    </li>
  </ul>
  <div id="type">Type</div>
  <div id="plan">Plan</div>
  <div id="date_time">Date Time</div>
  <div id="details">Details</div>
  <div id="conform">Conform</div>
</div>

<button class="login_button">Switch to next Tab</button>

点击按钮时需要转到下一个标签

1 个答案: