2

ナビゲーションにこのコードを使用しています：

.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 ファイルがインストールされています。

4

2 に答える 2

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ので、構文が正しいとは思いません。しかし、これは自分のドメインに合わせて調整できる良い例だと思います。

于 2012-11-13T12:26:37.680 に答える
1

Twitter-Bootstrapナビゲーションを取得してアクティブなリンクを表示する方法をご覧ください。.

その質問では、現在のページを「自動検出」するための多くの代替手段があるため、関連するメニュー項目にアクティブなクラスを簡単に設定できます。

于 2013-01-24T19:37:16.347 に答える