Rails 3：jquery 使用 AJAX 来切换视图，如何获得链接的焦点状态？

发布于 2024-12-12 00:08:54 字数 119 浏览 0 评论 0原文

刚刚通过 AJAX 改变了我的观点，但现在我对如何使请求的操作具有 :focus 类型 css 选项感到困惑，以便当用户选择“关于”和 _about 部分加载时，我可以拥有“关于”链接，其样式显示它是“关于”页面。非常感谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过潦 2024-12-19 00:08:54

在单击的链接上设置一个类，从所有其他链接中删除相同的类。例如：

$('a.tab_link').click(function(){
  $('a.tab_link').removeClass('active')
  $(this).addClass('active')
})

// CSS
a.tab_link.active {
  color: red;
}

Set a class on the clicked link, removing that same class from all the other links. For example:

$('a.tab_link').click(function(){
  $('a.tab_link').removeClass('active')
  $(this).addClass('active')
})

// CSS
a.tab_link.active {
  color: red;
}

回复收藏 0 原文

素罗衫 2024-12-19 00:08:54

你可以在你的 application_helper.rb 中拥有这样的助手，

  def  nav_link(name, url)
    selected = url.all? { |key, value| params[key] == value }
    link_to(name, url, :class => (selected ? "youarehere tabs" : "tabs"))
  end

然后在你看来你可以

<div id="menu-header">
       <div class="subheader answers-subheader">
        <div id="tabs" class="tabs2">
          <%= nav_link "example", :view => nil %>
          <%= nav_link "example1", :view => "example1"%>
          <%= nav_link "example2", :view => "example2" %>
        </div>
       </div>
</div>

  <div id="menu-items">
     <%= %w[example example1 example2 ].include?(params[:view]) ? render(params[:view]) : render("example") %>
  </div>

在你的 application.js 中拥有这样的助手我

$(function() {
    $(".tabs2 .tabs").click(function(e) {
      $("#tabs .tabs").removeClass("youarehere");
      $(this).addClass("youarehere");
      $("#menu-items").append('<div class="progress"><img src="/assets/loading.gif" width="32" height="32" alt="" /></div>');
      $.getScript(this.href);
      if (history && history.replaceState) {
        history.replaceState(null, document.title, this.href);
      }
      e.preventDefault();
    });
});

希望这会有所帮助

you can have a helper like this in your application_helper.rb

  def  nav_link(name, url)
    selected = url.all? { |key, value| params[key] == value }
    link_to(name, url, :class => (selected ? "youarehere tabs" : "tabs"))
  end

then in your view you can have

<div id="menu-header">
       <div class="subheader answers-subheader">
        <div id="tabs" class="tabs2">
          <%= nav_link "example", :view => nil %>
          <%= nav_link "example1", :view => "example1"%>
          <%= nav_link "example2", :view => "example2" %>
        </div>
       </div>
</div>

  <div id="menu-items">
     <%= %w[example example1 example2 ].include?(params[:view]) ? render(params[:view]) : render("example") %>
  </div>

then in your application.js you can have

$(function() {
    $(".tabs2 .tabs").click(function(e) {
      $("#tabs .tabs").removeClass("youarehere");
      $(this).addClass("youarehere");
      $("#menu-items").append('<div class="progress"><img src="/assets/loading.gif" width="32" height="32" alt="" /></div>');
      $.getScript(this.href);
      if (history && history.replaceState) {
        history.replaceState(null, document.title, this.href);
      }
      e.preventDefault();
    });
});

i hope this helps

回复收藏 0 原文

~没有更多了~