Question

我希望能够将主页加载到＆＃34; active＆＃34;加载页面时，可以在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插件，它已经完成了 tabbing 的所有逻辑。因此，您所要做的就是在正确的选项卡上触发$(document).ready(function(){ var hash = window.location.hash; if(hash) { $('.search-switcher a[href="'+hash+'"]').click(); } });事件：

reduce

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）作出反应。

如何从主页面url条目激活窗格？

2 个答案: