Question

我正在使用此代码进行导航：

.row-fluid
    .span3
      .well
        %ul.nav.nav-tabs.nav-stacked
          %li.nav-header
            Menu
          %li
            %a{:href => "/cms/1"} page1
          %li
            %a{:href => "/cms/2"} page2
          %li
            %a{:href => "/cms/3"} page3
          %li
            %a{:href => "/cms/4"} page4

如果我将.active放在%li之后使项目处于活动状态，我该如何动态执行此操作以反映哪个页面当前处于活动状态？我安装了所有bootstrap javascript文件。

Answer 1

您可以创建一个这样的辅助函数：

def active_navigation(item, param)
  "class='active'" if params[param] == item
end

然后在你看来，你做了这样的事情：

%li.nav-header
  Menu
%li{:class => active_navigation(1, :id)}
  %a{:href => "/cms/1"} page1
%li{:class => active_navigation(2, :id)}
  %a{:href => "/cms/2"} page2
%li{:class => active_navigation(3, :id)}
  %a{:href => "/cms/3"} page3
%li{:class => active_navigation(4, :id)}
  %a{:href => "/cms/4"} page4

我只是不知道/讨厌haml，所以我不认为语法是正确的。但我确实认为这是一个很好的例子，你可以尝试适应你自己的领域。

Answer 2

看看How to get Twitter-Bootstrap navigation to show active link?。

在该问题中，有很多替代方法可以“自动检测”当前页面，因此可以轻松地在相关菜单项上设置活动类。

Bootstrap动态主动导航

2 个答案: