Необходимо нажать на следующую вкладку, пока кнопка нажата - PullRequest
Новая
       35

Необходимо нажать на следующую вкладку, пока кнопка нажата

0 голосов
/ 28 сентября 2018

Здесь я пробовал много способов перейти на следующую вкладку, пока нажата кнопка, но здесь не идет мой код, пожалуйста, посмотрите. 

$(".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>

во время поиска я обнаружил, что код, который я написал, идеален, но не работает для меня, пожалуйста, помогите мне решить мою проблему

1 Ответ

0 голосов
/ 28 сентября 2018

Вам нужны элементы с идентификатором вкладок, на которые вы ссылаетесь.Другими словами, вам нужны вкладки и контейнеры для их содержимого: 

$(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>
...