Скрыть и показать вкладки Jquery UI

Question

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

На каждой вкладке у меня есть кнопка, и когда я нажимаю на нее, она должна скрывать текущую вкладку и остальные вкладки и показывать мне следующую вкладку (т.е. должен показать мне вкладку-2 и должен скрыть 1,3 и 4 вкладки) и аналогично для 2,3,4 вкладок.

Это то, что я имею в виду?

Так как мне это сделать?

Вот мой код: Сценарий:

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

Css:

<style type="text/css">
    #tabs { width: 700px; }
  </style>

Вкладка:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">TAB1</a></li>
    <li><a href="#tabs-2">TAB2</a></li>
    <li><a href="#tabs-3">TAB3</a></li>
    <li><a href="#tabs-4">TAB4</a></li>
  </ul>
  <div id="tabs-1">
    <p></p>
  </div>
  <div id="tabs-2">
    <p></p>
  </div>
  <div id="tabs-3">
    <p></p>
    <p></p>
  </div>
</div>

Answer 1

Я считаю, что следующий фрагмент кода должен делать то, что вы хотите.

$("#button_id").click(function() {
  $("#tabs").tabs('select', 'tab_index');
});

Tab_index должен быть целым числом, оно указывает позицию вкладки (начиная с нуля!), Поэтому здесь вы должны перейти в положение следующей или предыдущей вкладки. Вы можете получить индекс текущей вкладки следующим образом:

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); 

Предлагаю вам взглянуть на документацию .tabs () select метод .

Answer 2

Я нашел решение моей проблемы здесь http://beta.kilbot.com.au/labs/jquery/add-remove-tabs-using-jquery/

Answer 3

Пользовательский интерфейс jQuery на сайте говорит, что правильный синтаксис jQuery для этого должен иметь

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>