链接到Jquery选项卡不起作用

时间:2015-06-03 08:44:16

标签: javascript jquery html tabs laravel-5

我正在开发一个L5项目,我正在为其中一个页面使用Jquery选项卡。我有一个小菜单,无需点击标签即可获得标签内容。

<div id="aracislem" class="panel-collapse collapse">
    <div class="panel-body">
        <ul>
            <li><a href="http://localhost/pages/aracislemler#aracaramatab">Araç Arama </a></li>
            <li><a href="http://localhost/pages/aracislemler#arackayittab">Araç Kayıt </a></li>
            <li><a href="http://localhost/pages/aracislemler#istatistiktab">İstatistik </a></li>
            <li><a href="http://localhost/pages/aracislemler#aractakiptab">Araç Takibi </a></li>
        </ul>
    </div>
</div>

我的标签是

<script type="text/javascript">
    $(document).ready(function () {
        $('#tab-container').tabs({
            active: $.cookie('activetab'),
            activate: function (event, ui) {
                $.cookie('activetab', ui.newTab.index(), {
                    expires: 10
                });
            }
        });
    });
</script>

<div id="tab-container" class='tab-container'>
    <ul>
        <li class='tab'><a href="#aracaramatab">Araç Arama</a></li>
        <li class='tab'><a href="#arackayittab">Araç Kayıt</a></li>
        <li class='tab'><a href="#istatistiktab">İstatistik</a></li>
        <li class='tab'><a href="#aractakiptab">Araç Takip</a></li>
    </ul>
    <div class='panel-container'>
        <div id="aracaramatab">
            Araç Arama
        </div>
        <div id="arackayittab">
            Araç Kayıt
        </div>
        <div id="istatistiktab">
            İstatistik
        </div>
        <div id="aractakiptab">
            Araç Takip
        </div>
    </div>
</div>

当我访问菜单链接时,我无法访问必要的选项卡,链接浏览器中的更改但是当我单击选项卡时内容也不会重定向到选项卡,但链接不会更改。谁知道我做错了什么?

1 个答案:

答案 0 :(得分:0)

检查此演示:http://jsfiddle.net/yeyene/mktgnp3e/1/

您的问题是当您点击链接并转到链接后(它会重定向另一个页面?),想要激活标签,对吗?

首先获取url,然后获取hash,然后执行活动标签步骤。

JQUERY

$(document).ready(function () {
    $("#tab-container").tabs({});

    // for testing purpose
    var url = "http://localhost/pages/aracislemler#arackayittab";

    // use this script for getting url
    //var url = window.location.href;
    var hash = url.substring(url.indexOf('#'));

    // trigger click to tab with url hash name
    $('#tab-container a[href='+hash+']').trigger('click');
});

*为您的应用使用行var url = window.location.href;,然后取出当前获取测试变量的网址。