web-dev-qa-db-ja.com

Twitter-Bootstrapナビゲーションを取得してアクティブリンクを表示する方法

Twitter Bootstrapがナビゲーション用のアクティブリンクをどのように行うのか理解できません。このような通常のナビゲーションがある場合（Rubyリンク上のRailsを使用）：

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

クリックしたリンクに基づいてアクティブに保つにはどうすればよいですか？

ruby-on-railstwitter-bootstrap
105
LearningRoR

ここでまったく同じ質問に答えただけです Twitter Bootstrap Pills with Rails 3.2.2

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>
94
Pierre

次のようなものを使用できます（@philが言及したものに非常に似ていますが、少し短くなります）。

<ul class="nav">
  <li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
  <li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
  <li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>
</ul>
167
yorch

https://github.com/twg/active_link_to

<%= active_link_to 'Users', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="/users">Users</a></li>

47
Hesham

ヘルパーを使用して、これをRailsのフォームヘルパーのスタイルで実装しました。

ヘルパー内（例：app/helpers/ApplicationHelper.rb）：

def nav_bar
  content_tag(:ul, class: "nav navbar-nav") do
    yield
  end
end

def nav_link(text, path)
  options = current_page?(path) ? { class: "active" } : {}
  content_tag(:li, options) do
    link_to text, path
  end
end

次に、ビュー（例：app/views/layouts/application.html.erb）：

<%= nav_bar do %>
  <%= nav_link 'Home', root_path %>
  <%= nav_link 'Posts', posts_path %>
  <%= nav_link 'Users', users_path %>
<% end %>

この例は以下を生成します（「ユーザー」ページの場合）：

<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/posts">Posts</a></li>
  <li class="active"><a href="/users">Users</a></li>
</ul>
32
Daniel

代わりにこれを使用して、サーバーコードなしで現在のルートに基づいてnavでアクティブリンクを選択します。

    $(document).ready(function () {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });
22
Christian Landgren

hamlでlogical and（&&）を使用して成功しました：

%ul.nav
  %li{class: current_page?(events_path) && 'active'}
    = link_to "Events", events_path
  %li{class: current_page?(about_path) && 'active'}
    = link_to "About Us", about_path
11
Meltemi

各リンクについて：

<% if current_page?(home_path) -%><li class="active"><% else -%><li><% end -%>
  <%= link_to 'Home', home_path %>
</li>

あるいは

<li <% if current_page?(home_path) -%>class="active"<% end -%>>
  <%= link_to 'Home', home_path %>
</li>
5
phil pirozhkov

twitter bootstrap cssがどのように使用されているのか、またはRails側を尋ねているのかわからない。 Rails側を想定しています。

その場合は、 #link_to_if メソッドまたは #link_to_unless_current メソッドをチェックアウトします

3
cpjolicoeur

今日、私は同じ質問/問題を抱えていましたが、ソリューションに対する他のアプローチがありました。 application_helper.rbにヘルパー関数を作成します。

def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end

リンクは次のようになります。

<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>

params[:action]をparams[:controller]に置き換えて、リンクにコントローラー名を設定できます。

3
theforce

application_helper.rbでヘルパーメソッドを定義できます

def create_link(text, path)
  class_name = current_page?(path) ? 'active' : ''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

次のように使用できます：

create_link 'xyz', any_pathは次のように表示されます

<li class="active">
  <a href="/any">xyz</a>
</li>

それが役に立てば幸い！

2
Dusht

liごとにこれを使用します：

<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>

2
andreofthecape

リンクに tabulous を使用できます

記事 here TabulousをTwitter bootstrapおよびRails 3.xと組み合わせる方法について

1
stephenmurdoch

CSSクラスを操作して自分で行う必要があります。つまり、ユーザーが何らかのリンクをクリックした後、何らかの操作（ターゲットアクション）を行い、前のリンクを非アクティブに設定し、新しいリンクをアクティブに設定します。

リンクからサーバーに移動する（つまり、ページをリロードする）場合、サーバー上でアクティブなリンクを正しくレンダリングできます。それ以外の場合、クライアント側の処理（タブペインの切り替えなど）を行う場合は、javascriptを使用する必要があります。

1
Sergio Tulentsev

すでに多くの回答がありますが、ここに、アクティブリンクで機能するBootstrapアイコンを取得するために書いたものを示します。それが誰かを助けることを願っています

このヘルパーは以下を提供します：

  1. カスタムテキストを含むリンクを持つli要素
  2. オプションのBootstrap3アイコン
  3. 正しいページにいるとアクティブになります

これをapplication_helper.rbに入れます

def nav_link(link_text, link_path, icon='')
  class_name = current_page?(link_path) ? 'active' : ''
  icon_class = "glyphicon glyphicon-" + icon

  content_tag(:li, :class => class_name) do
    (class_name == '') ? (link_to content_tag(:span, " "+link_text, class: icon_class), link_path)
    : (link_to content_tag(:span, " "+link_text, class: icon_class), '#')
  end
end

そして、リンクを使用します：

<%= nav_link 'Home', root_path, 'home'  %>

最後の引数はオプションです-リンクにアイコンを追加します。グリフアイコンの名前を使用します。テキストのないアイコンが必要な場合：

    <%= nav_link '', root_path, 'home'  %>
1
Lukasz Muzyka

current_page?ハッシュでカスタムclass名を指定できる場合、ビューヘルパーhtml_optionsでビルドを使用して簡単なヘルパーメソッドを作成しました。

def active_link_to(name = nil, options = nil, html_options = nil, &block)
  active_class = html_options[:active] || "active"
  html_options.delete(:active)
  html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
  link_to(name, options, html_options, &block)
end

例（root_pathルートを使用している場合）：

<%= active_link_to "Main", root_path %>
# <a href="/" class="active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered" %>
# <a href="/" class="bordered active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
# <a href="/" class="bordered disabled">Main</a>
1
cintrzyk

ここでの答えの多くには、うまくいくもの、または部分的な答えがあります。たくさんのことを組み合わせて、このRailsヘルパーメソッドを使用します。

# helper to make bootstrap3 nav-pill <li>'s with links in them, that have
# proper 'active' class if active. 
#
# the current pill will have 'active' tag on the <li>
#
# html_options param will apply to <li>, not <a>. 
#
# can pass block which will be given to `link_to` as normal. 
def bootstrap_pill_link_to(label, link_params, html_options = {})
  current = current_page?(link_params)

  if current
    html_options[:class] ||= ""
    html_options[:class] << " active "
  end

  content_tag(:li, html_options) do
    link_to(label, link_params)
  end      
end

Link_toなどで&blockをサポートするための引数チェックにより、さらに洗練されたものにすることができます。

1
jrochkind

基本、ヘルパーなし

<%= content_tag(:li, class: ('active' if request.path == '/contact')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

複数のクラスがあるため、これを使用します-

<%= content_tag(:li, class: (request.path == '/contact' ? 'active black' : 'black')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>
0
scottkekoa
  def active_navigation?(controllers_name, actions_name)
   'active' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

スリム

li class=(active_navigation?(['events'], ['index', 'show'])) = link_to t('navbar.events'), events_path
0
Nazar Hlynskyi

SinatraでのRubyの使用..

bootstrap bareテーマを使用しています。ここにサンプルのnavbarコードがあります。エレメントのクラス名-> .nav-に注意してください。これはJavaスクリプトで参照されます。

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

ビューページ（または部分）でこれを追加します：javascript、これはページが読み込まれるたびに実行する必要があります。

hamlビュースニペット->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

JavaScriptデバッガーで、window.location.pathnameと一致する 'href'属性の値があることを確認してください。これは、私の問題を解決するのに役立った@Zitraxによる解決策とは少し異なります。

0
Rishi

私がやったことは次のとおりです。

ViewsHelperを作成し、ApplicationControllerに含めました。

include ViewsHelper

ViewsHelperの内部では、次のような簡単なメソッドを作成しました。

def page_state(path)
  current_page?(path) ? 'active' : ''
end

私の見解では、私はこれを行います：

<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>
0
Nick Res

最短コード

これは、両方のnavおよびsub navリスト要素を扱います。いずれかの配列に単一のパスを渡すことができ、両方を処理します。

application_helper

# Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end

ビュー（html.erb）

<ul class="nav navbar-nav">
  <li class="<%= ap p: home_path %>">Home</li>
  <li class="<%= ap p: account_path %>">Account</li>

  <li class="dropdown <%= ap p: [users_path, new_user_path] %>">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Users</a>
    <ul class="dropdown-menu" role="menu">
      <li class="<%= ap p: users_path %>">Users</li>
      <li class="<%= ap p: new_user_path %>">Add user</li>
    </ul>
  </li>
</ul>
0
cb24

ナビゲーションシステムを実装する必要があるように聞こえます。複雑な場合、非常にく、非常に高速になる可能性があります。

この場合、それを処理できるプラグインを使用することができます。 navigasmic または simple navigation を使用できます（navigasmicをお勧めします。navigasmicを使用すると、メインレイヤーがビュー内に保持されるため、一部の構成ではありません）。

0
Andrei S