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

时间:2015-06-12 09:28:22

标签: javascript jquery redirect jquery-tabs

我有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);
});

当我点击上面的这些外部链接时,我想重定向到必要的标签,当我点击这些链接中的任何一个时,浏览器的地址栏会发生变化,但没有重定向。怎么解决这个问题?任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

我已经准备好了这个玩家似乎工作得很好:

http://plnkr.co/edit/I5HCJasIl7OVEci7cwvI

在plunkr内部,我将最后一个<div>放在底部,以检查页面是否在那里导航并且工作正常。

此外,您必须对div中的元素使用 name 属性。请参阅相同“http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511

的链接

答案 1 :(得分:0)

所以,我认为这是一个愚蠢的错误,因为#点击功能中的选择器中缺少.open-tab

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

-Demo-

注意:已从jQuery UI v1.10 +中删除了select选项。如果您打算使用1.10 +

,则必须使用.tabs('active', <tabIndex>) 对于1.10 +

-Demo-