Question

我有一个类似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; }

我的问题是，当我尝试点击定价时，页面正在激活，但在菜单中显示主页...它没有激活菜单中的定价选项卡....你可以告诉其中任何一个＆＃39;这个问题？

Answer 1

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

这是我理解的代码

将点击事件绑定到所有标签元素
从所有标签元素中删除“有效”类
获取您点击的标签的“href”属性值
将活动类添加到您单击的选项卡
下一部分$（selected_tab）部分应该给你一个错误你拉出来的href值不应该变成一个 jQuery object 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/

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>

Dashboard.html

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

如果可能的话，你必须找到将其转换为erb的方法。这听起来像你的标签是常见的元素，所以它们应该是主模板的一部分或一部分，通过仪表板，升级等扩展。这种方法将保持突出显示标签的工作从客户端侧面并防止任何类型的闪烁这可能发生在页面加载上。

如何使用jquery激活rails中的导航选项卡

1 个答案: