JQuery имитировать нажмите на вкладку с выполнением кода

Question

Код ниже, когда я нажимаю на вкладку, я делаю сообщение и отображаю результат на вкладке.В некоторых случаях я хотел бы принудительно выбрать выбранную вкладку, а не только выбрать вкладку, но выбрать вкладку + выполнить код, выполняемый при нажатии на нее.

В моем примере мне нравится выбирать вторую вкладку(jLikeToSet = 1) и выполните код:

$.post('/Home/e2', function (data) {
        $('#tabs-2').html(data);
});

jQuery:

    var $tabs = $("#tabs").tabs();
    var jLikeToSet = 1
    $("#tabs").bind('tabsselect', function (event, ui) {
        switch (ui.index) {
            case 0:
                $.post('/Home/e1', function (data) {
                    $('#tabs-1').html(data);
                });
                break;
            case 1:
                $.post('/Home/e2', function (data) {
                    $('#tabs-2').html(data);
                });
                break;
            case 2:
                $.post('/Home/e3', function (data) {
                    $('#tabs-3').html(data);
                });
                break;
        }
    });

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Screen 1</a></li>
        <li><a href="#tabs-2">Screen 2</a></li>
        <li><a href="#tabs-3">Screen 3</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

Как я могу это сделать?

Спасибо,

Обновление1: я пытался использовать этот код: $('#tabs').tabsClick(1);, но без работы, пример отсюда http://www.eduteka.org/ajax/tabs3/

Answer 1

Чтобы программно выбрать вкладку, вызовите эту функцию с помощью jLikeToSet arg:

function selectTab(jLikeToSet){
    $("#tabs").tabs( "select" , jLikeToSet);
}

когда эта функция выполняется, это как если бы вы выбрали вручную, поэтому будет выполняться то, что внутри .bind('tabsselect'.

Answer 2

В зависимости от ваших пользователей, может быть лучше дать названия ваших вкладок, чтобы пользователь мог перейти непосредственно к ним, например, https://www.example.com # документы

Затем вы можете изменить свой HTML, чтобы отразить это и сделать «щелчок» более легким

<div id="tabs">
    <ul>
        <li><a id="documents_click" href="#documents">Documents</a></li>
        <li><a id="videos_click" href="#videos">Videos</a></li>
        <li><a id="profile_click" href="#profile">Profile</a></li>
    </ul>
    <div id="documents"></div>
    <div id="videos"></div>
    <div id="profile"></div>
</div>

Итак, чтобы выбрать вкладку документов, все, что вам нужно сделать в jQuery:

$('#documents_click').click();

Answer 3

Я бы сам изменил jQuery на следующее:

$(document).ready(function() {
    var $tabs = $("#tabs").tabs();
    $('#tabs li a').click(function(){
        $.post('/Home/e'+location.hash.replace('#tabs-',''), function (data) {
            $(location.hash).html(data);
        });
    });
});

Answer 4

Попробуйте добавить этот скрипт в событие ready и после создания вкладок:

$('#tabs-' + (jLikeToSet + 1) + ' a').click();