सक्रिय लिंक दिखाने के लिए ट्विटर-बूटस्ट्रैप नेविगेशन कैसे प्राप्त करें?

Question

मुझे समझ नहीं आ रहा है कि ट्विटर बूटस्ट्रैप नेविगेशन के लिए सक्रिय लिंक कैसे करता है। अगर मेरे पास इस तरह एक नियमित नेविगेशन है (रेल लिंकिंग पर रूबी के साथ):

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

मैं क्लिक किए गए लिंक के आधार पर इसे कैसे सक्रिय रख सकता हूं?

Comments

FYI करें: मैं active_link_to रत्न का उपयोग करता हूं और {: wra_class =>: li} निर्दिष्ट करता हूं। यह बनाएगा: <li class = 'active'> ... </ li> जब REQUEST_URI HREF मान से मेल खाता है ...

— जस्टिन E

Answer 1

बस इसी सवाल पर एक जवाब दिया यहाँ ट्विटर बूटस्ट्रैप पिल्स विथ रेल्स 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>

Comments

मुझे लगता है कि यह विचार सही है, लेकिन सीधे परम हैश में जाना एक बुरे विचार की तरह लगता है। इसी तरह बार-बार एक ही कोड को दोहराने के लिए। मैं कम से कम current_page का उपयोग करने की सलाह दूंगा? वर्तमान नियंत्रक / कार्रवाई की जांच करने के लिए विधि, और कोड पुनरावृत्ति से बचने के लिए कोड को एक सहायक में भी स्थानांतरित करेगा।

— डस्टिन फ्रेज़ियर

मुझे आश्चर्य है कि मैं उसी तरह से एचएमएल में कैसे लिखूं। एचएमएल में परिवर्तित करना मेरे लिए काम नहीं करता है। या शायद मैं कहीं गलत हूँ

— बेंच्वरर

एचएएमएल कार्यान्वयन%li{:class => "#{'active' if current_page?(root_path)}"}=link_to "Home", root_path

— ब्रायन

क्या db के अनुरोधों को किए बिना मैत्रीपूर्ण_दिल के साथ इस काम को करने का एक सुंदर तरीका है?

— एंगिन एर्दोगन

रेल डॉक्स को परम हैश से एक्सेस करने के बजाय controller_nameऔर action_nameहेल्पर्स के उपयोग की सलाह देते हैं ।

— अलेक्जेंडर सुराफेल

Answer 2

आप कुछ का उपयोग कर सकते हैं (जैसा कि उल्लिखित @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>

Comments

यदि आपके पास उप-दायित्व नहीं है तो काम नहीं करता है। रास्ता बदल जाता है लेकिन आप एक ही खंड में हैं .. समझ में आता है?

— जकोब डैम जेनसेन

हाँ, सही है, यदि आप एक मेनू आइटम को उजागर करना चाहते हैं, तो कोई फर्क नहीं पड़ता कि आप उसी नियंत्रक के अंदर किस विधि से चल रहे हैं, आप @ समाधान का उपयोग कर सकते हैं:'active' if params[:controller] == 'controller1'

— yorch

हाँ, ऐसा करने का सबसे सुरुचिपूर्ण तरीका है! धन्यवाद :)

— स्क्वीटर

मैं और अधिक पथ या की तरह एक विशिष्ट पथ कैसे जोड़ सकता हूँ user_*_pathमें <%= 'active' if current_page?(root_path) %>?

— इस्मोह

मेनू आइटम को सक्रिय बनाने के लिए आप एक से अधिक पथ कैसे जोड़ेंगे? उदाहरण के लिए, यदि आपके पास ड्रॉपडाउन में कई आइटम हैं जो समान मेनू आइटम के घटक हैं, और आप ड्रॉपडाउन मेनू में पाए गए किसी भी पेज पर होने पर मेनू आइटम को सक्रिय करना चाहेंगे? कृपया हमें जल्द से जल्द बताएं।

— msc

Answer 3

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>

Comments

इसे प्यार करना। पहिया को फिर से क्यों लिखें?

— लाईटर्स

यह वास्तव में जाने का रास्ता होना चाहिए ... जब तक आप एक और निर्भरता में नहीं खींचना चाहते।

— मार्क जी।

Answer 4

मैंने रेल के रूप सहायकों की शैली में इसे लागू करने के लिए एक सहायक का उपयोग किया।

एक सहायक में (जैसे 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>

Comments

यह भी खूब रही! धन्यवाद!

— Krzysztof Witczak

मुझे यह विचार पसंद आया, हालाँकि मैं एक तीसरा तर्क जोड़ना चाहूँगा nav_link फ़ंक्शन को html = {} जो तब link_to को दिया गया। जिस तरह से आप एक html हैश को nav_link पास कर सकते हैं उसी तरह से आप सामान्य रूप से link_to का उपयोग करेंगे।

— रयान फ्रेडमैन

Answer 5

सर्वर कोड के बिना वर्तमान मार्ग के आधार पर नौसेना में सक्रिय लिंक का चयन करने के बजाय इसका उपयोग करें:

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

Comments

यह सबसे अच्छा समाधान है क्योंकि यह ड्रॉपडाउन मेनू के साथ भी काम करता है, और मैं $('li.active').closest('.dropdown').addClass('active');मूल मेनू को भी हाइलाइट करने के लिए लाइन शामिल करता हूं ।

— सेर्ल्टो

उप-पृष्ठों के लिए भी आवेदन करने के लिए इसे कैसे बदलें? जैसे example.com/home काम करेगा। मुझे उदाहरण के लिए सक्रिय होने के लिए लिंक "होम" की आवश्यकता है ।

— एथुलटुट्टू

Answer 6

मैंने तार्किक और ( &&) का उपयोग करके 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

Answer 7

प्रत्येक लिंक के लिए:

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

Answer 8

यकीन नहीं है कि अगर आप ट्विटर बूटस्ट्रैप सीएसएस का उपयोग कैसे किया जाता है, या रेल की तरफ के बारे में पूछ रहे हैं। मैं रेल पक्ष मान रहा हूं।

यदि ऐसा है तो #link_to_ifविधि या #link_to_unless_currentविधि की जाँच करें

Answer 9

आज मेरे पास एक ही प्रश्न / समस्या थी लेकिन समाधान के लिए एक अन्य दृष्टिकोण के साथ। मैं 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]और कड़ी में अपने नियंत्रक नाम निर्धारित किया है।

Answer 10

मैं इसका उपयोग प्रत्येक के लिए करता हूं li:

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

Comments

क्लास के लिए सेट करने की आवश्यकता liनहीं हैa

— क्रिस्टोफर ओजबेक

Answer 11

आप एक सहायक विधि को परिभाषित कर सकते हैं 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>

आशा करता हूँ की ये काम करेगा!

Answer 12

आपको सीएसएस कक्षाओं में हेरफेर करके इसे स्वयं करना चाहिए। यही है, अगर कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो कुछ करें (लक्ष्य कार्रवाई), पिछले लिंक को निष्क्रिय और नए लिंक को सक्रिय सेट करें।

यदि आपके लिंक आपको सर्वर पर ले जाते हैं (यानी पेज को फिर से लोड करते हैं), तो आप बस सर्वर पर सक्रिय लिंक को सही तरीके से प्रस्तुत कर सकते हैं। अन्यथा, यदि आप कुछ क्लाइंट-साइड सामान (स्विचिंग टैब पैन या जो भी कर रहे हैं) कर रहे हैं, तो आपको जावास्क्रिप्ट का उपयोग करना होगा।

Answer 13

आप लिंक के लिए सारणीबद्ध का उपयोग कर सकते हैं

यहाँ लेख कैसे बूट बूटस्ट्रैप और रेल 3.x के साथ सारणीबद्ध करने के लिए पर

Answer 14

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>

Answer 15

यहां कई उत्तरों में ऐसी चीजें हैं जो काम करेंगी, या आंशिक उत्तर। मैंने इस रेल हेल्पर विधि का उपयोग करने के लिए चीजों का एक समूह संयुक्त किया:

# 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लिंक_ओ आदि पर समर्थन के लिए तर्क जाँच के साथ भी कट्टर बनाया जा सकता है ।

Answer 16

कई उत्तर पहले से ही हैं, लेकिन यहाँ मैंने बूटस्ट्रैप आइकन को सक्रिय लिंक के साथ काम करने के लिए लिखा है। आशा है कि यह किसी की मदद करेगा

यह सहायक आपको देगा:

1. कस्टम तत्व युक्त लिंक के साथ एलई तत्व
2. वैकल्पिक बूटस्ट्रैप आइकन
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'  %>

Answer 17

यहाँ मैंने क्या किया है:

मैंने एक 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>

Answer 18

आपको लगता है कि आपको नेविगेशन सिस्टम लागू करने की आवश्यकता है। यदि यह जटिल है, तो यह बहुत बदसूरत और बहुत तेज़ हो सकता है।

इस मामले में, आप एक प्लगइन का उपयोग करना चाह सकते हैं जो इसे संभाल सकता है। आप नेविगेशिक या सरल नेविगेशन का उपयोग कर सकते हैं (मैं नेविगिसेमिक की सिफारिश करूंगा क्योंकि यह मुख्य परत को एक दृश्य में रखता है, जहां यह संबंधित है, और कुछ कॉन्फ़िगरेशन में नहीं)

Answer 19

सबसे छोटा कोड 

यह बीओटीएच नौसेना, और उप नौसेना सूची तत्वों से संबंधित है। आप या तो एक एरे सिंगल पाथ पास कर सकते हैं और दोनों से निपटेंगे।

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>

Answer 20

सिनात्रा पर माणिक का प्रयोग ।।

मैं बूटस्ट्रैप नंगे विषय का उपयोग कर रहा हूं, यहां नमूना नावबार कोड है। तत्व का वर्ग नाम नोट करें -> .nav - जैसा कि जावा स्क्रिप्ट में निर्दिष्ट है।

/ 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

दृश्य पृष्ठ (या आंशिक) में इसे जोड़ें: जावास्क्रिप्ट, इसे हर बार पृष्ठ लोड किए जाने की आवश्यकता होती है।

एचएमएल दृश्य स्निपेट ->

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

जावास्क्रिप्ट डिबगर में सुनिश्चित करें कि आपके पास window.location.pathname के साथ 'href' विशेषता मिलान का मान है। यह @Zitrax द्वारा समाधान से थोड़ा अलग है जिसने मुझे अपना मुद्दा ठीक करने में मदद की।

Answer 21

बेसिक, नो हेल्पर

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

Comments

यह किसी भी उप नेविगेशन के लिए भी काम करेगा ... बस उप लिंक में मूल अनुरोध पथ का उपयोग करें।

— स्कौटकेकोआ

Answer 22

  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