Question

我正在使用最新的JQuery UI标签（1.10.2）。 http://jqueryui.com/tabs/

我需要能够链接到外部页面的各个标签。也许更正确的说法是说我需要能够通过bookmarble链接更改最初激活的选项卡。

我知道如何设置活动索引，以便＃tabs-3是活动标签

$( "#tabs" ).tabs({ active: 5 });

但我需要知道如何使用url哈希值更改.tabs（{active}）的值，以便“tabs-page.html＃tabs-3”的链接将加载“tabs-的第三个选项卡 - page.html“通过将.tabs（{active}）更改为”2“（因为它是一个从零开始的整数）。

我真的更像是一个html / css设计师和JQuery / JQuery UI的新手，请谢谢你的帮助。我搜索并找到了早期版本和JQuery Tools等替代库的修复程序，但JQuery 1.10.2没有。我已经找到了链接到该部分然后重置窗口位置的方法，但是当浏览器在窗口位置之间切换时，这会导致很多“跳跃”。如果有其他页面有此修复程序，请在评论中链接。非常感谢!!!

Answer 1

您需要在jQuery中读取哈希值。可以在Getting URL hash location, and using it in jQuery

找到一些好的信息

var url = "http://site.com/file.htm#3";
var hashValue = url.substring(url.indexOf('#')).replace('#',''); // '3'

完成此操作后，您将能够在jqueryUI选项卡上设置活动选项卡

$('#tabs').tabs( "option", "active", hashValue );

当页面最初加载时，您需要执行所有这些操作，因此在$(function(){ ... });

内

<强>更新

这是完整的代码;

<script>

    $(function () {

        // run the jquery ui plugin
        $('#tabs').tabs();

        // grab the url
        var url = document.URL;
        // grab the value of the hash
        var hashValue = url.substring(url.indexOf('#')).replace('#', '');

        // check to make sure it is a number
        if (!isNaN(hashValue)) {
            // set the active tab
            $('#tabs').tabs("option", "active", hashValue);
        }            

    });

</script>

jquery ui 1.10.2 tabs - 链接到另一个页面或网站的选项卡

1 个答案: