1

我有一个ul类似的菜单：

<ul class="tabs pull-right">
  <% if user_signed_in? %>
  <li class="active"><a href="/dashboard">Dashboard</a></li>
  <% else %>    
  <li class="active"><a href="/">Home</a></li>
  <% end %>
  <% if user_signed_in? %>
  <li><a href="/upgrade">Upgrade</a></li>
  <% else %>
  <li><a href="/pricing">Pricing</a></li>
  <% end %>

我的jQuery代码是

$(document).ready(function(){
  $(".tabs li").click(function() {
    $(".tabs li").removeClass('active');

    var selected_tab = $(this).find("a").attr("href");
    $(this).addClass("active");
    $(selected_tab).fadeIn();
    return false;
  });
});

我的 CSS

.tabs_wrapper { width: 900px; } 
.tabs_container { border-bottom: 0px solid #ccc; } 
.tabs { list-style: none; padding: 5px 0 4px 0; margin: 0 0 0 10px; font: 1.15em arial; } 
.tabs li { display: inline; } 
.tabs li a { border: 1px solid #ccc; 
             padding: 4px 6px; text-decoration: none; 
             background-color: #eeeeee; border-bottom: none; 
             outline: none; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; 
             -webkit-border-top-left-radius: 5px; 
             -webkit-border-top-right-radius: 5px; } 
.tabs li a:hover { background-color: #dddddd; padding: 4px 6px; } 
.tabs li.active a { border-bottom: 1px solid #fff; background-color: #fff; padding: 4px 6px 5px 6px; border-bottom: none; } 
.tabs li.active a:hover { background-color: #eeeeee; padding: 4px 6px 5px 6px; border-bottom: none; }

我的问题是当我尝试点击定价时，页面正在激活，但在菜单中它显示主页...它没有激活菜单中的定价选项卡...。你们中的任何一个都可以告诉你有什么问题吗？

4

1 回答 1

0

您的 jQuery 代码对我来说没有多大意义。

这是据我了解的代码

  1. 将点击事件绑定到所有选项卡元素
  2. 从所有选项卡元素中删除“活动”类
  3. 获取您单击的选项卡的“href”属性值
  4. 将活动类添加到您单击的选项卡
  5. 下一部分 $(selected_tab) 部分应该会给您一个错误，您提取的 href 值不应该能够转换为 jQuery 对象 afaik。

请提供有关您要执行的操作的更多信息。

据我所知，单击选项卡会给您带来硬页面刷新，在 href 属性中加载页面，而不是引用同一页面上的 DOM 元素。如果是这种情况，您上面的代码将永远不会设置活动选项卡，因为一旦您单击，您就会离开。

根据我掌握的少量信息，您可以做这样的事情，但这并不理想，很可能会闪烁。

$(function() {
  // cache your tabs selector
  var $tabs = $('.tabs li');

  // see what page you are currently on to compare to tabs
  var pageLocation = window.location.pathname;

  // remove the Active class from the tabs
  $tabs.removeClass('active');

  // loop through your tabs
  $tabs.each(function () {
    var $tab = $(this);
    var tabHref = $tab.attr('href');

    if (tabHref === pageLocation){
      $tab.addClass('active');
    }
  });

  // Alternative dont add active to any tabs in your template and select by href
  // this selector would be slow
  $('a[href="'+pageLocation+'"]').parent().addClass('active');
});

http://jsfiddle.net/billpull/D3jKZ/

就像我之前说的那样，这并不理想。这很可能是您希望在模板中设置的东西，但对 RoR/erb 模板不太熟悉，但我认为您可以做一些事情，其中​​您有一个带有选项卡的基本模板设置，然后您有一个贯穿它们的循环，并且检查活动页面。这是 jinja for python 中的一个示例

Base.html

{% set logged_in_tabs = [
   ('/dashboard', 'dashboard', 'Dashboad'),
   ('/upgrade', 'upgrade', 'Upgrade')
] %}

{% set unauthed_tabs = [
   ('/', 'home', 'Homepage'),
   ('/pricing', 'pricing', 'Pricing')
] %}

{% set active_page = active_page|default("home") %}

<ul class="tabs">
  {% if user_signed_in %}
    {% for href, id, caption in logged_in_tabs %}
       <li {% if id == active_page %}class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
    {% endfor %}
  {% else %}
       {% for href, id, caption in unauthed_tabs %}
         <li {% if id == active_page %}class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
       {% endfor %}
  {% endif %}
</ul>

仪表板.html

{% extends 'Base.html' %}
{% set active_page = 'dashboard' %}

如果可能的话，您将不得不找到某种方式将其转换为 erb。听起来您的选项卡无论如何都是常见元素，因此它们应该是通过仪表板、升级等扩展的主模板的一部分或一部分。这种方法将使突出显示选项卡的工作远离客户端并防止任何形式的闪烁这可能发生在页面加载时。

于 2013-02-15T18:26:35.510 回答