Làm cách nào để điều hướng Twitter-Bootstrap hiển thị liên kết đang hoạt động?

Tôi không hiểu cách Twitter Bootstrap thực hiện các liên kết hoạt động cho điều hướng. Nếu tôi có một điều hướng thường xuyên như thế này (với liên kết ruby ​​trên đường ray):

<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>

Làm cách nào để giữ cho nó hoạt động dựa trên liên kết được nhấp vào?

Vừa đưa ra câu trả lời cho câu hỏi tương tự tại đây 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>

Bạn có thể sử dụng một cái gì đó như (rất giống với những gì @phil đã đề cập, nhưng ngắn hơn một chút):

<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>

https://github.com/twg/active_link_to

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

#=> <li class="active"><a href="https://stackoverflow.com/users">Users</a></li>

Tôi đã sử dụng trình trợ giúp để triển khai điều này theo kiểu trình trợ giúp biểu mẫu của Rails.

Trong một trình trợ giúp (ví dụ 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

Sau đó, trong một khung nhìn (ví dụ 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 %>

Ví dụ này tạo ra (khi trên trang 'người dùng'):

<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>

Thay vào đó, hãy sử dụng liên kết này để chọn liên kết hoạt động trong điều hướng dựa trên tuyến đường hiện tại không có mã máy chủ:

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

Tôi đã thành công khi sử dụng logic và ( &&) trong haml :

%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

Đối với mỗi liên kết:

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

hoặc thậm chí

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

không chắc nếu bạn đang hỏi về cách sử dụng twitter bootstrap css, hoặc phía rails. Tôi đang giả định phía đường ray.

nếu vậy hãy kiểm tra #link_to_ifphương pháp hoặc #link_to_unless_currentphương pháp

Hôm nay tôi có cùng một câu hỏi / vấn đề nhưng với một cách tiếp cận khác cho giải pháp. Tôi tạo một hàm trợ giúp trong application_helper.rb:

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

và liên kết trông như thế này:

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

Bạn có thể thay thế params[:action]bằng params[:controller]và đặt tên bộ điều khiển của mình trong liên kết.

Tôi sử dụng cái này cho mỗi li:

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

Bạn có thể xác định một phương thức trợ giúp trong 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

Bây giờ bạn có thể sử dụng như:

create_link 'xyz', any_path mà sẽ hiển thị như

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

Hy vọng nó giúp!

Bạn nên tự làm điều đó bằng cách thao tác với các lớp CSS. Nghĩa là, nếu người dùng nhấp vào một số liên kết, sau đó làm điều gì đó (hành động mục tiêu), đặt liên kết trước đó không hoạt động và liên kết mới hoạt động.

Nếu các liên kết của bạn đưa bạn đến máy chủ (nghĩa là tải lại trang), thì bạn có thể hiển thị liên kết đang hoạt động một cách chính xác trên máy chủ. Mặt khác, nếu bạn đang thực hiện một số nội dung phía máy khách (chuyển đổi ngăn tab hoặc bất cứ thứ gì), bạn phải sử dụng javascript.

bạn có thể sử dụng bảng cho các liên kết

bài viết ở đây về cách kết hợp tabulous với twitter bootstrap và rails 3.x

Tôi đã viết phương pháp trợ giúp đơn giản bằng cách sử dụng trình trợ giúp xây dựng trong chế độ xem current_page?khi bạn có thể chỉ định classtên tùy chỉnh trong html_optionsbăm.

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

Ví dụ (khi bạn đang trên root_pathđường):

<%= 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>

Nhiều câu trả lời ở đây có những thứ sẽ hoạt động, hoặc câu trả lời một phần. Tôi đã kết hợp nhiều thứ để tạo ra phương pháp trợ giúp đường ray mà tôi sử dụng:

# 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

Nó có thể được làm cho thậm chí còn hấp dẫn hơn với việc kiểm tra đối số để hỗ trợ &blocktrên link_to, v.v.

Nhiều câu trả lời đã có, nhưng đây là những gì tôi đã viết để có được Biểu tượng Bootstrap hoạt động với liên kết hoạt động. Hy vọng nó sẽ giúp ai đó

Người trợ giúp này sẽ cung cấp cho bạn:

1. phần tử li với liên kết chứa văn bản tùy chỉnh
2. Biểu tượng Bootstrap3 tùy chọn
3. sẽ hoạt động khi bạn ở đúng trang

Đặt cái này vào application_helper.rb của bạn

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

Và sử dụng liên kết:

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

Đối số cuối cùng là tùy chọn - nó sẽ thêm biểu tượng vào liên kết. Sử dụng tên của các biểu tượng glyph. Nếu bạn muốn biểu tượng không có văn bản:

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

Đây là những gì tôi đã làm:

Tôi đã tạo một ViewsHelper và đưa vào ApplicationController:

include ViewsHelper

Inside ViewsHelper, tôi đã tạo một phương thức đơn giản như sau:

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

Theo quan điểm của tôi, tôi làm điều này:

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

Bạn có vẻ như bạn cần triển khai một hệ thống định vị. Nếu nó phức tạp, nó có thể trở nên khá xấu và khá nhanh.

Trong trường hợp này, bạn có thể muốn sử dụng một plugin có thể xử lý điều đó. Bạn có thể sử dụng navigasmic hoặc đơn giản chuyển hướng (Tôi muốn giới thiệu navigasmic vì nó giữ lớp chính trong một cái nhìn, nơi mà nó thuộc về, và không có trong một số cấu hình)

Mã ngắn nhất 

Điều này đề cập đến CẢ HAI điều hướng và các phần tử danh sách điều hướng phụ. Bạn có thể truyền cho mảng một đường dẫn duy nhất và sẽ xử lý cả hai.

application_helper

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

xem (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>

Sử dụng ruby ​​trên Sinatra ..

Tôi đang sử dụng chủ đề trần bootstrap, đây là mã điều hướng mẫu. Lưu ý tên lớp của phần tử -> .nav - vì nó được gọi trong java script.

/ 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

trong trang xem (hoặc một phần) thêm this: javascript, điều này cần được thực thi mỗi khi tải trang.

đoạn mã chế độ xem haml ->

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

Trong trình gỡ lỗi javascript, hãy đảm bảo rằng bạn có giá trị của thuộc tính 'href' phù hợp với window.location.pathname. Điều này hơi khác so với giải pháp của @Zitrax đã giúp tôi khắc phục sự cố của mình.

Cơ bản, không có người trợ giúp

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

Tôi sử dụng cái này vì tôi có nhiều hơn một lớp -

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

  def active_navigation?(controllers_name, actions_name)
   'active' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

mảnh khảnh

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