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

How can I activate a pane from the main page url entry?

本文关键字：激活 url 主页      更新时间：2023-09-26

我希望能够将主页加载到加载页面时可以在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>

您可能已经设置了一个javascript代码或jQuery插件，它已经完成了选项卡的所有逻辑。因此，您所要做的就是在正确的选项卡上触发click事件：

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

如果我正确理解了你的问题，你可以在你的页面中添加一些基本的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）做出反应。

相关文章：