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

});