วิธีรับการนำทาง Twitter-Bootstrap เพื่อแสดงลิงค์ที่ใช้งานอยู่

ฉันไม่เข้าใจว่า Twitter Bootstrap ทำลิงค์ที่ใช้งานอยู่สำหรับการนำทางได้อย่างไร หากฉันมีการนำทางเป็นประจำเช่นนี้ (โดยมีทับทิมบนรางเชื่อม):

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

ฉันจะทำให้มันใช้งานได้อย่างไรตามลิงค์ที่คลิก

เพิ่งตอบคำถามเดียวกันที่นี่ 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>

คุณสามารถใช้บางสิ่งเช่น (คล้ายกับที่ @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>

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>

ฉันใช้ตัวช่วยเพื่อใช้สิ่งนี้ในรูปแบบของตัวช่วยแบบฟอร์มของ 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>

ใช้สิ่งนี้แทนเพื่อเลือกลิงค์ที่ใช้งานอยู่ในการนำทางตามเส้นทางปัจจุบันที่ไม่มีรหัสเซิร์ฟเวอร์:

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

ฉันพบว่าประสบความสำเร็จโดยใช้ตรรกะและ ( &&) ใน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

สำหรับแต่ละลิงค์:

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

ไม่แน่ใจว่าคุณถามเกี่ยวกับวิธีใช้ twitter bootstrap css หรือด้านราง ฉันสมมติว่าด้านราง

ถ้าเป็นเช่นนั้นชำระเงิน#link_to_ifวิธีการหรือ#link_to_unless_currentวิธีการ

วันนี้ฉันมีคำถาม / ปัญหาเดียวกัน แต่มีแนวทางอื่นในการแก้ปัญหา ฉันสร้างฟังก์ชันตัวช่วยใน 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]และตั้งชื่อตัวควบคุมของคุณในการเชื่อมโยง

ฉันใช้สิ่งนี้สำหรับแต่ละli:

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

คุณอาจกำหนดวิธีการช่วยเหลือใน 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>

หวังว่าจะช่วยได้!

คุณควรทำด้วยตัวเองโดยจัดการคลาส CSS นั่นคือหากผู้ใช้คลิกที่ลิงก์บางลิงก์จากนั้นทำอะไรบางอย่าง (การดำเนินการตามเป้าหมาย) ตั้งค่าลิงก์ก่อนหน้าไม่ใช้งานและลิงก์ใหม่ที่ใช้งานอยู่

หากลิงก์ของคุณนำคุณไปยังเซิร์ฟเวอร์ (นั่นคือทำการโหลดหน้าซ้ำ) คุณก็สามารถแสดงลิงก์ที่ใช้งานอยู่บนเซิร์ฟเวอร์ได้อย่างถูกต้อง มิฉะนั้นหากคุณกำลังทำบางอย่างในฝั่งไคลเอ็นต์ (สลับบานหน้าต่างแท็บหรืออะไรก็ตาม) คุณต้องใช้จาวาสคริปต์

คุณสามารถใช้ตารางสำหรับลิงก์

บทความที่นี่เกี่ยวกับวิธีการรวม tabulous กับ twitter bootstrap และ rail 3.x

ฉันเขียนวิธีตัวช่วยง่ายๆโดยใช้ build in view helper 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>

คำตอบมากมายที่นี่มีสิ่งที่ใช้ได้ผลหรือคำตอบบางส่วน ฉันรวมสิ่งต่างๆเข้าด้วยกันเพื่อสร้างวิธีการช่วยเหลือรางนี้ที่ฉันใช้:

# 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

สามารถทำให้ดูน่าสนใจยิ่งขึ้นด้วยการตรวจสอบอาร์กิวเมนต์เพื่อสนับสนุน&blockบน link_to เป็นต้น

มีคำตอบมากมายแล้ว แต่นี่คือสิ่งที่ฉันเขียนเพื่อให้ Bootstrap Icons ทำงานกับลิงค์ที่ใช้งานอยู่ หวังว่ามันจะช่วยใครสักคน

ผู้ช่วยนี้จะให้คุณ:

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

พื้นฐานไม่มีตัวช่วย

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

นี่คือสิ่งที่ฉันทำ:

ฉันสร้าง ViewsHelper และรวมอยู่ใน ApplicationController:

include ViewsHelper

Inside Views ช่วยด้วยฉันสร้างวิธีง่ายๆดังนี้:

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

ในมุมมองของฉันฉันทำสิ่งนี้:

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

คุณดูเหมือนจะต้องติดตั้งระบบนำทาง ถ้ามันซับซ้อนมันอาจจะค่อนข้างน่าเกลียดและค่อนข้างเร็ว

ในกรณีนี้คุณอาจต้องการใช้ปลั๊กอินที่สามารถจัดการได้ คุณสามารถใช้navigasmicหรือการนำทางอย่างง่าย (ฉันขอแนะนำ navigasmic เพราะจะเก็บเลเยอร์หลักไว้ในมุมมองที่เป็นของและไม่อยู่ในการกำหนดค่าบางอย่าง)

รหัสที่สั้นที่สุด 

สิ่งนี้เกี่ยวข้องกับทั้งองค์ประกอบการนำทางและองค์ประกอบรายการการนำทางย่อย คุณสามารถส่งอาร์เรย์ไปยังเส้นทางเดียวและจะจัดการกับทั้งสองอย่าง

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>

ใช้ทับทิมกับซินาตร้า ..

ฉันใช้ธีม bootstrap เปล่านี่คือตัวอย่างโค้ด 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

ในหน้าดู (หรือบางส่วน) ให้เพิ่มสิ่งนี้: จาวาสคริปต์สิ่งนี้จะต้องดำเนินการทุกครั้งที่โหลดหน้า

ข้อมูลโค้ดมุมมอง haml ->

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

ในโปรแกรมดีบัก javascript ตรวจสอบให้แน่ใจว่าคุณมีค่าแอตทริบิวต์ "href" ที่ตรงกับ window.location.pathname สิ่งนี้แตกต่างจากวิธีแก้ปัญหาโดย @Zitrax เล็กน้อยซึ่งช่วยฉันแก้ไขปัญหาได้

  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