jQuery UI Tabs 或 .load() - 选项卡链接与选项卡内容和附加 URL 位于不同的容器中

Question

我有以下 html 结构

<div id-"top">
    <ul id="tabs">
      <li><a href="#tab-content-1">tab 1</a></li>
      <li><a href="#tab-content-2">tab 2</a></li>
      <li><a href="#tab-content-3">tab 3</a></li>
    </ul>
<!--/top--></div>

<div id="content">
    <div id="tab-content-1">content 1</div>
    <div id="tab-content-2">content 2</div>
    <div id="tab-content-3">content 3</div>
<!--/bottom--></div>

从我所看到的和其他用途来看，jQuery UI 选项卡要求 ul 和内容位于同一个容器中，而我的容器则不然。

所以我使用了 .load() 函数 - 我将这个方法的链接从“#tab-content-1”分别更改为“AjaxPages/tab-content-1.html”，并且有以下有效的代码，但是我无法让它附加网址，因此它会反映可见内容，因此它们可以添加书签并且能够直接链接到。

$(function() {
      $('#content').load('AjaxPages/tab-content-1.html');
      });

        $("#tabs li a").click(function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#content").load(href);
    });

我可以使用基本的 jQuery UI 选项卡将 div id 添加到 url 中：

if($(".tab-set") && document.location.hash){
                $.scrollTo(".tab-set");
            }
            $(".tab-set ul").localScroll({ 
                duration:300,
                    hash:true
            });

使用 localScroll 和scrollTo 插件。有什么建议吗？这不应该这么难！

Answer 1

我做了一个 jsfiddle 但无法完全测试它，因为你无法处理地址栏中的哈希值，至少点击链接可以按预期工作，希望有帮助。

HTML

<div id="top">
    <ul id="tabs">
      <li><a href="#1">tab 1</a></li>
      <li><a href="#2">tab 2</a></li>
      <li><a href="#3">tab 3</a></li>
    </ul>
</div><!--/top-->

<div id="content"></div><!--/bottom-->

JS

$(function() {

    function loadContentTroughHash(hash) {
        var orighash = hash ? hash : window.location.hash;
        var h =
            orighash.length > 1
            && orighash.indexOf('#') != -1
            && !isNaN(orighash.substring(1))
            ? orighash.substring(1)
            : 1;
        // hash is not just '#' but has '#' and hashtag is a number
        // else use 1
        $('#content').load('AjaxPages/tab-content-'+h+'.html');
    }

    $("#tabs li a").click( function(e) {
        e.preventDefault();
        var $t = $(this),
            $parent = $t.parent(),
            href = $t.attr('href');
        $parent.addClass("selected").siblings().removeClass("selected");
        loadContentTroughHash(href);
    });

    loadContentTroughHash();

});