Как установить активную вкладку в jQuery Ui

Не могли бы вы сообщить мне, как я могу установить активную вкладку в jquery ui нажатием кнопки на вкладках?

У меня есть кнопка вроде:

<input id="action" type="submit" value="Go to Action">

и вот код,

<script>
$(function() {
 $( "#tabs" ).tabs();
 $( "#action" ).on("click", function(){});
});


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Action</a></li>
        <li><a href="#tabs-3">Resources</a></li>
        <li><a href="#tabs-4">Settings</a></li>
    </ul>

<div id="tabs-1">
    <p>Description content</p>
</div>

<div id="tabs-2">
    <p>Action content</p>
</div>

<div id="tabs-3">
    <p>Resources content</p>
</div>

<div id="tabs-4">
    <p>Settings </p>
</div>

</div>

Ответы

Ответ 1

Внутри вашей функции для действия click используйте

$( "#tabs" ).tabs({ active: # });

Где # заменяется индексом табуляции, который вы хотите выбрать.

Изменить: изменить с выбранного на активное, выбрано устаревшее

Ответ 2

Простое решение jQuery - найдите элемент <a>, где href="x" и щелкните по нему:

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

Ответ 3

Просто прояснить в деталях. Это то, что работает с текущей версией jQuery Ui

$( "#tabs" ).tabs( "option", "active", # );

где # - индекс вкладки, которую вы хотите активировать.

Ответ 4

Внутри вашей функции для действия click используйте

$( "#tabs" ).tabs({ active: # });

Где # заменяется индексом табуляции, который вы хотите выбрать.

Ответ 5

Я знаю, что это старый вопрос. Но я думаю, что способ изменить выбранную вкладку изменился незначительно.

Теперь можно изменить активную вкладку, указав активный вкладку. Обратите внимание, что индекс начинается с 0, а не 1. Чтобы вкладка вторая активна, вы будете использовать индекс 1.

//this will select your first tab
$( "#tabs" ).tabs({ active: 0 });

Ответ 6

Вы можете использовать это:

$(document).ready(function() {
    $("#tabs").tabs();
    $('#action').click(function() {
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected + 1);
    });
});

Также рассмотрите возможность изменения типа ввода как button вместо submit, если вы не хотите отправить страницу.

Ответ 7

Если вы хотите установить активную вкладку по идентификатору, а не по индексу, вы также можете использовать следующее:

$('#tabs').tabs({ active: $('#tabs ul').index($('#tab-101')) });

Ответ 8

HTML: сначала у вас есть o сохранить индекс вкладки

<input type="hidden" name="hddIndiceTab" id="hddIndiceTab" value="<?php echo filter_input(INPUT_POST, 'hddIndiceTab');?>"/>

JS

$( "#tabs" ).tabs({
    active: $('#hddIndiceTab').val(), // activate the last tab selected
    activate: function( event, ui ) {
        $('#hddIndiceTab').val($( "#tabs" ).tabs( "option", "active" )); // save the tab index in the input hidden element
    }
});

Ответ 9

просто кликните, это работает для меня:

$("#tabX").trigger("click");