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>

我该怎么做？

谢谢，

Update1：我试着使用这段代码： $('#tabs').tabsClick(1);但没有工作，样本来自http://www.eduteka.org/ajax/tabs3/

Answer 1

要以编程方式选择选项卡，请使用jLikeToSet arg：

调用此函数

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

执行此功能时，就像您已手动选择一样，因此.bind('tabsselect'内的内容将被执行。

Answer 2

尝试在ready事件中以及创建选项卡后添加此脚本：

$('#tabs-' + (jLikeToSet + 1) + ' a').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

根据您的用户，最好提供您的标签名称，以便用户可以直接转到他们，例如https://www.example.com#documents

然后你可以改变你的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();

jQuery模拟单击选项卡执行代码

4 个答案: