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();

});

jQuery UI选项卡或.load（） - 选项卡链接在不同的容器中，而不是选项卡内容和追加URL

1 个答案: