メインページのURLエントリからペインをアクティブにするにはどうすればよいですか？

Question

ページがロードされたときにURLで「アクティブな」ペインを選択できるサイトにメインページをロードしたいと考えています。例えばhttp://www.somepage.com/#advancedSearchそれは可能ですか？ここで

は私の現在の設定です：

<div class="well"> 
    <div class="row-fluid"> 

    <div class="span12"> 

     <div class="tab-content"> 
     <div id="simpleSearch" class="tab-pane active"> 
     <div class="span8"> 
      <h4><%= I18n.t("brand.welcome_message") %></h4> <h5>(Other searches are listed below.)</h5> 
      <%= render_aspace_partial :partial => "simple_search" %> 
     </div> 
      <div class="span4"> 
       <%= render_aspace_partial :partial => "browse_side" %> 
      </div> 
     </div> 
     <div id="advancedSearch" class="tab-pane"> 
     <div class="span8"> 
      <h4><%= I18n.t("brand.welcome_message_adv") %></h4> <h5>(Other searches are listed below.)</h5> 
      <%= render_aspace_partial :partial => "advanced_search" %> 
     </div> 
      <div class="span4"> 
       <%= render_aspace_partial :partial => "browse_side" %> 
       <%= render_aspace_partial :partial => "advanced_help_side" %> 
      </div> 
     </div> 
     <div id="cartographicSearch" class="tab-pane"> 
     <div class="span8"> 
      <h4><%= I18n.t("brand.welcome_message_map") %></h4> <h5>(Other searches are listed below.)</h5> 
      <%= render_aspace_partial :partial => "cartographic_search" %> 
     </div> 
     <div class="span4"> 
      <%= render_aspace_partial :partial => "cartographic_side" %> 
     </div> 
     </div> 
     <div id="operationSearch" class="tab-pane"> 
     <div class="span8"> 
      <h4><%= I18n.t("brand.welcome_message_ops") %></h4> <h5>(Other searches are listed below.)</h5> 
      <%= render_aspace_partial :partial => "operation_search" %> 
     </div> 
     <div class="span4"> 

     </div> 
     </div> 
     <div id="cdecSearch" class="tab-pane"> 
     <div class="span8"> 
      <h4><%= I18n.t("brand.welcome_message_cdec") %></h4> <h5>(Other searches are listed below.)</h5> 
      <%= render_aspace_partial :partial => "cdec_search" %> 
     </div> 
     <div class="span4"> 

     </div> 
     </div> 
     <div id="thesaSearch" class="tab-pane"> 
     <div class="span8"> 
      <h4><%= I18n.t("brand.welcome_message_thesa") %></h4> <h5>(Other searches are listed below.)</h5> 
      <%= render_aspace_partial :partial => "thesa_search" %> 
     </div> 
     <div class="span4"> 

     </div> 
     </div> 
     </div> 

    <div class="span12"> 
     <ul class="search-switcher"> 
     <li class="active"> 
      <a href="#simpleSearch" data-toggle="tab" style="font-size:110%" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.hide_advanced_search") %></a> 
     </li> 
     <li> 
      <a href="#advancedSearch" data-toggle="tab" style="font-size:110%" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_advanced_search") %></a> 
     </li> 
     <li> 
      <hr /> 
     </li> 
     <li> 
      <a href="#cartographicSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_map_search") %></a> 
     </li> 
     <li> 
      <a href="#operationSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_operation_search") %></a> 
     </li> 
     <li> 
      <a href="#cdecSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_cdec_search") %></a> 
     </li> 
     <li> 
      <a href="#thesaSearch" data-toggle="tab" onclick="window.scrollTo(0, 165);"><%= I18n.t("actions.show_thesa_search") %></a> 
     </li> 
     </ul> 

     <%# recent_posts %> 
    </div> 
    </div> 

    </div> 
</div> 

Answer 1

のロジックをすべて実行するjavascriptコードまたはjQueryプラグインを設定している可能性があります。です。したがって、正しいタブでイベントを発生させるだけです。

$(document).ready(function(){ 
    var hash = window.location.hash; 
    if(hash) { 
     $('.search-switcher a[href="'+hash+'"]').click(); 
    } 
}); 

Answer 2

私が正しくあなたの質問を理解している場合、あなたはあなたのためにこれを処理するために、あなたのページにいくつかの基本的なJavaScriptを追加することができます。

あなたはjQueryのに精通していると仮定：

$(document).ready(
    function(){ 
    the_anchor = window.location.hash || '#someOtherAnchor'; // in your example URL, this would return the string '#advancedSearch' 
    $(the_anchor).addClass('active'); 
    } 
); 

上記の別のタブが既にすでにactiveクラスを持つために考慮されていません。クライアントサイドのJavaScriptを使用して、URL内の「アンカー」（つまり#advancedSearch）にどのように反応するかについての考えを伝えるだけです。