URLをjqueryのタブにロードすることはできますか？

Question

以下は、私が取り組んでいるjQuery AJAXタブスクリプトの完全なコードです。

私は助けが必要です。このスクリプトには3つのタブがあり、それぞれAJAXを使ってページをDIVにロードします。
3つのページのうちの1つを「選択済み」にして、ページの読み込みにロードできるようにする必要があります。

URLがwww.site.com/page.phpの場合は、最初のタブの内容を読み込み、そのタブを選択する必要があります。

もし私がwww.site.com/page.php?t=bulletinsのようなものに行ったり、何らかの方法でURLに何らかの形で行きましたら、別のタブを指定してページロード時に選択して選択することができます。誰でも助けることができるそれは、タブ2、タブ1

の代わりにロードされなければならない、私はURLで何かを追加することができ、同じページ上

例とそのページが別のページ上のリンクから呼び出されたこのページに行ってきました私はこのスクリプトにこれを追加しますか？可能であればjqueryUIを使いたくありません。

これはjquery UIなしで可能ですか？

はまた私の現在のコードへの改善をお願い申し上げ、私はJavaScriptとjqueryの

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> 
<script type="text/javascript"> 
// array of pages to load 
var pageUrl = new Array();   
pageUrl[1] = "page1.php"; 
pageUrl[2] = "somepage2.php"; 
pageUrl[3] = "lastpage3.php"; 

// function to load page into DIV 
function loadTab(id) { 
    if (pageUrl[id].length > 0) { 
     $("#loading").show(); 
     $.ajax({ 
      url: pageUrl[id], 
      cache: false, 
      success: function (message) { 
       $("#tabcontent").empty().append(message); 
       $("#loading").hide(); 
      } 
     }); 
    } 
} 

$(document).ready(function(){ 
    $("#loading").hide(); 
    $("#tab1").click(function(){ 
     loadTab(1); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab2").click(function(){ 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab3").click(function(){ 
     loadTab(3); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
    }); 
</script> 

<div class="HOMEtabdiv"> 
    <ul class="HOMEtabs"> 
     <li><a id="tab1" href="#" onClick="return false;" class="selected">All</a></li> 
     <li><a id="tab2" href="#" onClick="return false;">Status</a></li> 
     <li><a id="tab3" href="#" onClick="return false;">Bulletins</a></li> 
    </ul> 
</div> 
<div id="loading"> 
    <img src="images/loading.gif"> 
</div> 
<div id="tabcontent"> 
Tab Content loads pages into here 
</div> 

<style type="text/css"> 
a:active { outline:none;} 
:focus { -moz-outline-style:none;} 
/* root element for tabs */ 
ul.HOMEtabs { 
    margin:0 !important; 
    padding:0; 
    height:30px; 
    border-bottom:1px solid #666;  
} 
/* single tab */ 
ul.HOMEtabs li { 
    float:left; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
} 
ul.HOMEtabs a { 
    float:left; 
    font-size:13px; 
    display:block; 
    padding:5px 30px; 
    text-decoration:none; 
    border:1px solid #666; 
    border-bottom:0px; 
    height:18px; 
    background-color:#efefef; 
    color:#777; 
    margin-right:2px; 
    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-topright:4px; 
    position:relative; 
    top:1px;  
} 
ul.HOMEtabs a:hover { 
    background-color:#FFFFFF; 
    color:#333; 
} 
/* selected tab */ 
ul.HOMEtabs a.selected { 
    background-color:#FFFFFF; 
    border-bottom:2px solid #FFFFFF;  
    color:#000; 
    cursor:default; 
} 
</style> 

Answer 1

で新しいです私は、その内容が本当の重いではないと仮定すると、ページのロード直後にdiv要素の内容をロードします。最初のタブを自動選択する場合は、CSSを使用して行う必要があるため、ページ読み込み時にすぐに表示されます。

そのタブのクリックイベントを発生させるので、それはコンテンツのショーでしょう

$("div.tabs:first").trigger("click"); 

：あなたがプログラムでそれを行いたい場合は、私がような単純なものをお勧めしたいです。

ページの読み込み時に選択するタブを検出するには、そのURLのハッシュ属性を使用する必要があります。あなたがwww.somesite.com/index.html#projectsを訪問した場合、「プロジェクト」を警告する

alert(window.location.hash); 

。ハッシュリファレンスの使い方の大事な点は、CSSが利用できないときにキーコンテンツをスクロールして表示することです。

その値（存在する場合）から、ページが読み込まれたときにクリックをトリガーするタブを決定します。これはあなたが正しい方向に動くのに十分であるはずです。より具体的な質問がある場合は、お気軽にお問い合わせください。可能な限りお手伝いすることができれば幸いです。