Aktif bağlantıyı göstermek için Twitter-Bootstrap navigasyonu nasıl sağlanır?

Twitter Bootstrap'in gezinme için nasıl aktif bağlantılar yaptığını anlamıyorum. Bunun gibi düzenli bir navigasyona sahipsem (Ruby on rails bağlantılı):

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

Tıklanan bağlantıya göre nasıl aktif tutabilirim?

Aynı soruya burada bir cevap verdim 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>

Şunun gibi bir şey kullanabilirsiniz (@phil'in bahsettiğine çok benzer, ancak biraz daha kısa):

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

Bunu Rails'in form yardımcıları tarzında uygulamak için bir yardımcı kullandım.

Bir yardımcı olarak (örneğin 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

Ardından, bir görünümde (örneğin 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 %>

Bu örnek ('kullanıcılar' sayfasındayken) şunları üretir:

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

Bunun yerine, sunucu kodu olmadan mevcut rotaya göre nav'deki etkin bağlantıyı seçmek için kullanın:

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

Haml'de mantıksal ve ( &&) kullanarak başarı buldum :

%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

Her bağlantı için:

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

ya da

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

twitter bootstrap css'in nasıl kullanıldığını mı yoksa raylar tarafını mı sorduğunuzdan emin değilsiniz. Ray tarafını varsayıyorum.

böylece çıkış ise #link_to_ifyöntem ya da #link_to_unless_currentyöntem

Bugün aynı soruyu / sorunu yaşadım ama çözüm için başka bir yaklaşımla. Application_helper.rb'de bir yardımcı işlev oluşturuyorum:

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

ve bağlantı şöyle görünür:

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

Bağlantıdaki denetleyici adınızı params[:action]ile değiştirebilir params[:controller]ve ayarlayabilirsiniz.

Bunu her biri için kullanıyorum li:

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

Bir yardımcı yöntem tanımlayabilirsiniz. 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

Şimdi aşağıdaki gibi kullanabilirsiniz:

create_link 'xyz', any_path hangisi olarak işlenir

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

Umarım yardımcı olur!

CSS sınıflarını değiştirerek bunu kendiniz yapmalısınız. Yani, bir kullanıcı bir bağlantıya tıklarsa, bir şeyler yapın (hedef eylem), önceki bağlantıyı devre dışı bırakın ve yeni bağlantıyı etkinleştirin.

Bağlantılarınız sizi sunucuya götürürse (yani sayfayı yeniden yüklerse), etkin bağlantıyı sunucuda doğru şekilde görüntüleyebilirsiniz. Aksi takdirde, istemci tarafında bazı şeyler yapıyorsanız (sekme bölmelerini değiştirmek veya her neyse), javascript kullanmanız gerekir.

bağlantılar için tabulous kullanabilirsiniz

makale burada twitter bootstrap ile tabulous birleştirmek ve 3.x raylar için nasıl

Karma current_page?özel classad belirtebildiğinizde, derleme görünüm yardımcısını kullanarak basit yardımcı yöntem yazdım 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

Örnekler ( root_pathrotadayken):

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

Buradaki cevapların çoğunda işe yarayacak şeyler veya kısmi cevaplar var. Kullandığım bu rayları yardımcı yöntemi yapmak için birkaç şeyi birleştirdim:

# 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

&blockLink_to vb. Desteği desteklemek için bağımsız değişken kontrolü ile daha da meraklı hale getirilebilir.

Zaten birçok cevap var, ama işte Bootstrap Simgelerinin aktif bağlantı ile çalışmasını sağlamak için yazdıklarım. Umarım birine yardımcı olur

Bu yardımcı size şunları verecektir:

1. özel metin içeren bağlantıya sahip li öğesi
2. İsteğe Bağlı Bootstrap3 Simgesi
3. doğru sayfadayken aktif hale gelecektir

Bunu application_helper.rb dosyanıza koyun

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

Ve bağlantıyı kullanın:

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

Son bağımsız değişken isteğe bağlıdır - bağlantıya simge ekleyecektir. Glif simgelerinin adlarını kullanın. Metin içermeyen simge istiyorsanız:

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

Temel, Yardımcı Yok

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

Bunu birden fazla sınıfım olduğu için kullanıyorum -

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

İşte yaptığım şey:

Bir ViewsHelper oluşturdum ve ApplicationController'a dahil ettim:

include ViewsHelper

Inside ViewsHelper Bunun gibi basit bir yöntem oluşturdum:

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

Benim görüşüme göre şunu yapıyorum:

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

Bir navigasyon sistemi kurmanız gerekiyormuş gibi konuşuyorsunuz. Karmaşıksa, oldukça çirkin ve oldukça hızlı olabilir.

Bu durumda, bunun üstesinden gelebilecek bir eklenti kullanmak isteyebilirsiniz. Navigasmi veya basit gezinmeyi kullanabilirsiniz ( navigasmic'i tavsiye ederim çünkü ana katmanı ait olduğu yerde ve bazı konfigürasyonlarda değil bir görünümde tutar)

En kısa kod 

Bu, BOTH nav ve alt nav listesi öğeleriyle ilgilidir. Bir diziye tek bir yol iletebilirsiniz ve her ikisiyle de ilgilenebilirsiniz.

application_helper

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

görünümü (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>

Sinatra'da yakut kullanmak ..

Bootstrap bare temasını kullanıyorum, işte örnek navbar kodu. Java betiğinde bahsedildiği için -> .nav - öğesinin sınıf adına dikkat edin.

/ 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

görünüm sayfasında (veya kısmi) şunu ekleyin: javascript, bunun sayfa her yüklendiğinde yürütülmesi gerekir.

haml görünümü pasajı ->

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

Javascript hata ayıklayıcısında, "href" özniteliğinin window.location.pathname ile eşleştiğinden emin olun. Bu, sorunumu çözmeme yardımcı olan @Zitrax çözümünden biraz farklı.

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

ince

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