特定のJavaScriptタブに直接リンクするにはどうすればよいですか？

Question

私のウェブサイトには、すべてのページで一貫して使用されるタブ付きのインターフェースがあります。基本ページ（最初のタブ）にリンクすることはできますが、特定のタブにリンクする方法を理解することはできません。

これは私のJavaScriptのである：

$(document).ready(function() { 
    $(".tabs a").click(function() { 
    var $this = $(this); 
    $(".panel").hide(); 
    $(".tabs a.active").removeClass("active"); 
    $this.addClass("active").blur(); 
    var panel = $this.attr("href"); 
    $(panel).fadeIn(250); 
    return false; 
    }); 
$(".tabs li:first-of-type a").click(); 
}); 

そして、私のページのそれぞれが、このように設定されています

<div id="aboutContainer"> 
    <ul class="tabs"> 
     <li><a href="#panel1">About Us</a></li> 
     <li><a href="#panel2">Contact Us</a></li> 
     <li><a href="#panel3">Mailing List</a></li> 
     <li><a href="#panel4">Terms</a></li> 
     <li><a href="#panel5">Privacy Policy</a></li> 
     <li><a href="#panel6">Help</a></li> 
    </ul> 
     <div class="panelContainer"> 
      <div class="panel" id="panel1"> 
       <?php include('includes/aboutme.php'); ?> 
      </div> 

      <div class="panel" id="panel2"> 
       <?php include('includes/contact.php'); ?> 
      </div> 

      <div class="panel" id="panel3"> 
       <?php include('includes/mailinglist.php'); ?> 
      </div> 

      <div class="panel" id="panel4"> 
       <?php include('includes/terms.php'); ?>    
      </div> 

      <div class="panel" id="panel5"> 
       <?php include('includes/privacypolicy.php'); ?> 
      </div> 

      <div class="panel" id="panel6"> 
       <?php include('includes/cheekyreference.php'); ?> 
      </div> 
     </div> 
</div> 

任意のポインタをいただければ幸いです。私はJavaScriptを初めて使い慣れていて、ウェブを検索する答えを見つけることができませんでした。

私はabout.phpページ上だ場合は、タブ付きインターフェイスの作品を：物事を少し明確にする

。しかし、私がしようとしているリンクの種類は次のとおりです：私が別のページにいた場合、私はaboutページの特定のタブにリンクしたいと思います。ナビゲーションフッタがあり、「メーリングリスト」や「連絡先」などのハイパーリンクをクリックして正しいページを表示し、正しいタブを表示できるようにしたいと考えています。

Answer 1

あなたは特別例えば利用規約]タブをクリックしたい場合は、あなたがしたい：

$(".tabs a[href='#panel14']").click();

Answer 2

$('a[href="#panel1"]').click(function() { 
     //insert action here; 
});​ 

Answer 3

多分これはやり過ぎですが、クライアントサイトのルーティングでそれを行うことができるはずです。

アドレスバーのURLに基​​づいてアクティブになる「ルート」を設定し、次にのtab1へのリンクを次の形式で持つことができます。アクティブなルートで適切なタブをアクティブにします（そのタブでクリックイベントを発生させます）。もちろん、他のルーティングソリューションがあります。ここ

が

http://jsrouter.codeplex.com/

をルーティングJavaScriptを提供するjQueryプラグインへのリンクですが、ここでは被写体にStackOverflowのポストへのリンクです javascript clientside routing/pathing library

Answer 4

技術これを実現するには、URLのハッシュ部分を使用します。たとえば、次のように

about.php＃パネル1

または、類似した、hashbangと：＃！about.php

は（hashbangがある

をPANEL1あなたがSEOに関心を持っている場合はより良い選択です）。

URLのハッシュ部分を検出するスクリプトをページに組み込み、それに応じてタブをアクティブにします。

申し訳ありませんが、私はこれを常時行っていますが、公開サンプルがありません。私は1つ持っているときに私はポストを更新します。あなたはまた、クエリ文字列を使用することができますが、ページ上に既にある場合は、ハッシュは、ページの更新を防ぐことができます：

$(".tabs a[href="+window.location.hash+"]").click(); 

注：

jQueryのでは、それは次のようになります。