1

我正在使用最新的 JQuery UI 选项卡 (1.10.2)。http://jqueryui.com/tabs/

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

我知道如何设置活动索引，以便 #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 工具）的修复程序，但对于 JQuery 1.10.2 没有。我找到了链接到该部分的方法，然后重置窗口位置，但是当浏览器在窗口位置之间切换时，这会导致很多“跳跃”。如果有此修复的另一个页面，请在评论中链接。非常感谢！！！

4

1 回答 1

2

您将需要在 jQuery 中读取哈希值。可以在这里找到一些好的信息获取 URL 哈希位置，并在 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>
于 2013-04-16T14:10:34.720 回答