কীভাবে সক্রিয় লিঙ্কটি দেখানোর জন্য টুইটার-বুটস্ট্র্যাপ নেভিগেশন পাবেন?

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

এফওয়াইআই: আমি সক্রিয়_লিংক_তে রত্ন ব্যবহার করি এবং {: মোড়ানো_ক্লাস =>: লি} নির্দিষ্ট করি} এটি তৈরি করবে: <লি ক্লাস = 'সক্রিয়'> ... </ li> যখন REQUEST_URI এইচআরএফ মানের সাথে মেলে ...

— জাস্টিন ই

Answer 1

এখানে খুব একই প্রশ্নের একটি উত্তর দিয়েছেন যার সাথে রিয়েল ৩.২.২ রয়েছে টুইটার বুটস্ট্র্যাপ পিলস

<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

আমি ধারণা এখানে সঠিক, তবে সরাসরি পরম হ্যাশ এ যাওয়া খারাপ ধারণা মত মনে হয়। একইভাবে বারবার একই কোডটি পুনরাবৃত্তি করার জন্য। আমি কমপক্ষে কারেন্ট_পেজটি ব্যবহার করার পরামর্শ দেব? বর্তমান নিয়ামক / ক্রিয়া পরীক্ষা করার পদ্ধতি এবং কোডটির পুনরাবৃত্তি এড়াতে কোডটিকে কোনও সহায়ক হিসাবে স্থানান্তরিত করবে।

— ডাস্টিন ফ্রেজিয়ার

আমি ভাবছি কীভাবে আমি এইচএমএল তে লিখি। এইচএমএল রূপান্তর করা আমার পক্ষে কাজ করে না। অথবা সম্ভবত আমি কোথাও ভুল করছি

— বেঞ্চওয়ার্মার

এইচএএমএল বাস্তবায়ন%li{:class => "#{'active' if current_page?(root_path)}"}=link_to "Home", root_path

— ব্রায়ান

ডিবি অনুরোধ না করে বন্ধুত্বপূর্ণ_আইডি রত্ন দিয়ে এই কাজটি করার কি সুন্দর উপায় আছে?

— ইঞ্জিন এরদোগান

রেল ডক্স প্যারাম হ্যাশ থেকে তাদের অ্যাক্সেস করার পরিবর্তে controller_nameএবং action_nameসহায়তাকারীদের ব্যবহারের পরামর্শ দেয় ।

— আলেকজান্ডার সুর্যাপেল

Answer 2

আপনি এর মতো কিছু ব্যবহার করতে পারেন (@ ফিল্মের সাথে উল্লিখিত চিত্রের সাথে খুব মিল, তবে কিছুটা ছোট):

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

— ইয়র্ক

হ্যাঁ, এটি করার জন্য এটি সবচেয়ে মার্জিত উপায়! ধন্যবাদ :)

— স্কুইটার

আমি আরো পথ বা মত একটি নির্দিষ্ট পথ কিভাবে যোগ করতে পারেন user_*_pathমধ্যে <%= 'active' if current_page?(root_path) %>?

— ইসমোহ

আপনি মেনু আইটেমটি সক্রিয় করতে কীভাবে একাধিক পথ যুক্ত করবেন? উদাহরণস্বরূপ, যদি ড্রপডাউনে আপনার কাছে বেশ কয়েকটি আইটেম থাকে যা একই মেনু আইটেমের উপাদান হয় এবং আপনি যখন ড্রপডাউন মেনুতে পাওয়া কোনও পৃষ্ঠায় থাকেন তখন আপনি মেনু আইটেমটি সক্রিয় করতে চান? যত তাড়াতাড়ি সম্ভব আমাদের জানান।

— এমএসসি

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

আমি এই ধারণাটি পছন্দ করি, তবে আমি এইচটিএমএল = called called নামে এনভ_লিংক ফাংশনটিতে তৃতীয় যুক্তি যুক্ত করব যা তারপরে লিংক_তে চলে গেছে। আপনি লিংক_তে সাধারণভাবে যেভাবে ব্যবহার করতে চান ঠিক সেভাবেই Nav_link করতে আপনি এইচটিএমএল হ্যাশ পাস করতে পারেন।

— রায়ান ফ্রেডম্যান

Answer 5

সার্ভার কোড ছাড়াই বর্তমান রুটের ভিত্তিতে নাভিতে সক্রিয় লিঙ্কটি নির্বাচন করতে এর পরিবর্তে এটি ব্যবহার করুন:

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

Comments

ড্রপডাউন মেনুগুলির সাথে এটি কাজ করার জন্য এটি সর্বোত্তম সমাধান কারণ এবং আমি $('li.active').closest('.dropdown').addClass('active');পিতামাতার মেনুটিকেও হাইলাইট করার জন্য লাইনটি অন্তর্ভুক্ত করি।

— Seralto

উপ-পৃষ্ঠাগুলির জন্য প্রয়োগ করতে কীভাবে এটি পরিবর্তন করবেন? মত example.com/home কাজ করবে। উদাহরণস্বরূপ // হোম / পৃষ্ঠার ক্ষেত্রেও সক্রিয় থাকতে আমার "হোম" লিঙ্কটি প্রয়োজন ।

— অ্যাথল্টট্টু

Answer 6

লজিকাল এবং ( &&) এইচএমএল ব্যবহার করে আমি সাফল্য পেয়েছি :

%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

আজ আমার একই প্রশ্ন / সমস্যা ছিল তবে সমাধানের জন্য অন্য পদ্ধতির সাথে। আমি অ্যাপ্লিকেশন_হেল্পার.আরবিতে একটি সহায়ক ফাংশন তৈরি করেছি:

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. Ptionচ্ছিক বুটস্ট্রা 3 আইকন
3. আপনি যখন ডান পৃষ্ঠাতে যাবেন তখন সক্রিয় হয়ে উঠবে

এটি আপনার অ্যাপ্লিকেশন_হেল্পার.আরবিতে রাখুন

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

শেষ যুক্তি alচ্ছিক - এটি লিঙ্কটিতে আইকন যুক্ত করবে। গ্লাইফ আইকনগুলির নাম ব্যবহার করুন। আপনি যদি কোনও পাঠ্য না দিয়ে আইকনটি চান:

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

Answer 17

আমি যা করেছি তা এখানে:

আমি একটি ভিউহেল্পার তৈরি করেছি এবং অ্যাপ্লিকেশন নিয়ন্ত্রণকারীতে অন্তর্ভুক্ত করেছি:

include 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

ভিউ পৃষ্ঠাতে (বা আংশিক) এটি যুক্ত করুন: জাভাস্ক্রিপ্ট, প্রতিবার পৃষ্ঠা লোড করার জন্য এটি কার্যকর করা দরকার।

haml ভিউ স্নিপেট ->

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

জাভাস্ক্রিপ্ট ডিবাগারটিতে নিশ্চিত হয়ে নিন যে আপনার উইন্ডো.লোকেশন.প্যাথনামের সাথে 'href' বৈশিষ্ট্যের মিল রয়েছে। এটি @ জিট্রােক্সের সমাধানের চেয়ে কিছুটা আলাদা যা আমার সমস্যা সমাধানে আমাকে সহায়তা করেছিল।

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