Bootstrap 动态主动导航答案

【问题标题】：Bootstrap dynamic active navigationBootstrap 动态主动导航
【发布时间】：2012-11-01 20:11:39
【问题描述】：

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

.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 之后，它会使项目处于活动状态，我该如何动态地执行此操作以反映当前处于活动状态的页面？我已经安装了所有的引导 javascript 文件。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap navigation haml

【解决方案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，所以我认为语法不正确。但我确实认为这是一个很好的例子，您可以尝试适应自己的领域。

【讨论】：

【解决方案2】：

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

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

【讨论】：