jQueryのUIのタブまたは.LOAD（） - タブのタブの内容とは異なるコンテナ内のリンクと追加URL

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とコンテンツは同じコンテナ内にあるはずですが、私のものはそうではありません。

私はこのメソッドのリンクを "＃tab-content-1"から "AjaxPages/tab-content-1.html"に変更しました。次のコードがありますそれは動作しますが、URLを追加して可視コンテンツを反映させることができないので、ブックマーク可能で直接リンクできるようになります。

$(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のタブでURLへのdivのidを追加することができます。localScrollとscrollToプラグインで

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

。何かアドバイス？これは難しいことではありません！

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

});