jQuery UI的标签或.load（） - 在不同的容器标签的链接比标签内容并添加网址

Question

我有以下的HTML strucuture

<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”，并且有下面的代码这是有效的，但我无法得到它附加的网址，所以它会反映可见内容，所以他们可收藏，并能够直接链接。与localScroll和scrollTo插件

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

：

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

我可以DIV ID与此添加到基本的jQuery UI选项卡的URL。有什么建议？这不应该是这个难！

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

});