Question

我使用jquery-ui tabs组件。这是我页面中的代码

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

组件完美无缺

有没有办法在ajax调用后更改显示的标签？

当我执行ajax调用tab2时显示。我希望在ajax调用之后显示tab3

Answer 1

在没有jQueryUI的情况下尝试这些标签

$('ul').each(function(){
    var $active, $content, $links = $(this).find('a');

    //Set focus when the page is reloaded
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.parent().addClass('active');
    $content = $($active.attr('href'));

    //Hide containers
    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    //Set click event
    $(this).on('click', 'a', function(e){
        $active.parent().removeClass('active');
        $content.hide();
        $active = $(this);
        $content = $($(this).attr('href'));
        $active.parent().addClass('active');
        $content.show();
        e.preventDefault();
    });
});

Answer 2

是的，只需使用active选项：

$("ul").tabs("option", "active", 1); // Select tab 2

jquery选项卡 - 在ajax调用后更改选项卡

2 个答案: