Bootstrap 动态主动导航

Posted 2023-04-13

【中文标题】Bootstrap 动态主动导航

【英文标题】：Bootstrap dynamic active navigation

【发布时间】：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 文件。

【参考方案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?。

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