javascript - 链接不会重定向到 Jquery 选项卡

Question

我有 4 个链接

<li><a class="open-tab" href="#sirkethesaptab">Şirket Hesabı</a></li>
<li><a class="open-tab" href="#musterihesaptab">Müşteri Hesabı</a></li>
<li><a class="open-tab" href="#odemetab">Ödemeler</a></li>
<li><a class="open-tab" href="#harcamatab">Harcamalar</a></li>
<li><a class="open-tab" href="#personeltab">Personel</a></li>

我有一个 Jquery 选项卡

<div class="col-sm-9 padding-right">
    <div id="tab-container2" class='tab-container'>
        <ul class='etabs'>
            <li class='tab'><a href="#sirkethesaptab">Şirket Hesabı</a></li>
            <li class='tab'><a href="#musterihesaptab">Müşteri Hesabı</a></li>
            <li class='tab'><a href="#odemetab">Ödemeler</a></li>
            <li class='tab'><a href="#harcamatab">Harcamalar</a></li>
            <li class='tab'><a href="#personeltab">Personel</a></li>
        </ul>
        <div class='panel-container'>
            <div id="sirkethesaptab">
                <h2>sirkethesaptab</h2>
            </div>
            <div id="musterihesaptab">
                <h2>musterihesaptab</h2>
            </div>
            <div id="odemetab">
                <h2>odemetab</h2>
            </div>
            <div id="harcamatab">
                <h2>harcamatab</h2>
            </div>
            <div id="personeltab">
                <h2>personeltab</h2>
            </div>
        </div>
    </div>
</div>

Jquery 代码

$('#tab-container2').tabs({
    active: $.cookie('activetab'),
    activate: function (event, ui) {
        $.cookie('activetab', ui.newTab.index(), {
            expires: 10
        });
    }
});

$('.open-tab').click(function (event) {
    var tab = $(this).attr('href');
    alert(tab);
    $('tab-container2').tabs('select', tab);
});

当我单击上面的这些外部链接时，我想重定向到必要的选项卡，当我单击这些链接中的任何一个时，浏览器的地址栏会发生变化，但没有重定向。如何解决这个问题？任何帮助将不胜感激。

Answer 1

所以，我猜这是一个愚蠢的错误，因为你缺少 #在 .open-tab 内的选择器中点击功能。

$('.open-tab').click(function (event) {
    var tab = $(this).attr('href');
    alert(tab);
    $('#tab-container2').tabs('select', tab); // <- added #
});

-Demo-

注意:select选项已从 jQuery UI v1.10+ 中删除。您必须使用.tabs('active', <tabIndex>)如果您打算使用 1.10+

-Demo- 1.10+