blocks|key|396116|text|不确定您是在询问twitter引导css是如何使用的，还是关于rails方面的。我假设是rails方面的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396117|如果是这样，请检查#link_to_if方法或#link_to_unless_current方法|offset|length|style|CODE|396118|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rails/rails/blob/00554568e0625b2e4d4212ab7464f02234f74427/actionpack/lib/action_view/helpers/url_helper.rb#L452|1|https://github.com/rails/rails/blob/00554568e0625b2e4d4212ab7464f02234f74427/actionpack/lib/action_view/helpers/url_helper.rb#L396^0|0|9|B|N|N|9|B|0|N|N|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@$D|X|E|Y|1|Z]|$D|10|E|11|1|12]]|A|$]]|$1|H|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

not sure if you are asking about how the twitter bootstrap css is used, or the rails side. I'm assuming the rails side.

if so checkout the <a href="https://github.com/rails/rails/blob/00554568e0625b2e4d4212ab7464f02234f74427/actionpack/lib/action_view/helpers/url_helper.rb#L452" rel="nofollow"><code>#link_to_if</code></a> method 
or the <a href="https://github.com/rails/rails/blob/00554568e0625b2e4d4212ab7464f02234f74427/actionpack/lib/action_view/helpers/url_helper.rb#L396" rel="nofollow"><code>#link_to_unless_current</code></a> method

blocks|key|396182|text|你应该通过操作CSS类自己来做。也就是说，如果用户点击了某个链接，然后执行某些操作(目标操作)，将上一个链接设置为非活动状态，而将新链接设置为活动状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396183|如果您的链接将您带到服务器(即，使页面重新加载)，那么您可以在服务器上正确地呈现活动链接。否则，如果你正在做一些客户端的事情(切换标签窗格或其他什么)，你必须使用javascript。|396184|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You should do it yourself by manipulating CSS classes. That is, if a user clicks on some link, then do something (target action), set previous link inactive and new link active.

If your links take you to the server (that is, make page reload), then you can just render active link correctly on the server. Otherwise, if you're doing some client-side stuff (switching tab panes or whatever), you have to use javascript.

blocks|key|396249|text|听起来你需要实现一个导航系统。如果它很复杂，它可能会变得非常丑陋，而且速度很快。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396250|在这种情况下，您可能希望使用一个可以处理此问题的插件。你可以使用navigasmic或simple+navigation+(我推荐使用导航，因为它将主层保存在视图中，而不是在某些配置中)|offset|length|396251|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jejacks0n/navigasmic|1|https://github.com/andi/simple-navigation/^0|0|W|A|0|17|H|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]|$D|U|E|V|1|W]]|A|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|O]]]]

You sound like you need to implement a navigation system. If it's complex, it might get pretty ugly and pretty fast.

In this case, you might want to use a plugin that can handle that. You could use <a href="https://github.com/jejacks0n/navigasmic" rel="nofollow">navigasmic</a> or <a href="https://github.com/andi/simple-navigation/" rel="nofollow">simple navigation</a> (I would recommend navigasmic because it keeps the main layer in a view, where it belongs, and not in some configuration)

blocks|key|612295|text|刚刚在这里回答了同样的问题Twitter+Bootstrap+Pills+with+Rails+3.2.2|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|612296|<ul+class="nav">
++<li+class="<%25=+'active'+if+params[:controller]+==+'controller1'+%25>">+<a+href="/link">Link</a>+</li>
++<li+class="<%25=+'active'+if+params[:controller]+==+'controller2'+%25>">+<a+href="/link">Link</a>+</li>
++<li+class="<%25=+'active'+if+params[:controller]+==+'controller3'+%25>">+<a+href="/link">Link</a>+</li>++++++++
</ul>|code-block|syntax|javascript|612297|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9862524/twitter-bootstrap-pills-with-rails-3-2-2^0|D|14|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Just made an answer on the very same question here
<a href="https://stackoverflow.com/questions/9862524/twitter-bootstrap-pills-with-rails-3-2-2">Twitter Bootstrap Pills with Rails 3.2.2</a>

<pre><code>&lt;ul class="nav"&gt;
 &lt;li class="&lt;%= 'active' if params[:controller] == 'controller1' %&gt;"&gt; &lt;a href="/link"&gt;Link&lt;/a&gt; &lt;/li&gt;
 &lt;li class="&lt;%= 'active' if params[:controller] == 'controller2' %&gt;"&gt; &lt;a href="/link"&gt;Link&lt;/a&gt; &lt;/li&gt;
 &lt;li class="&lt;%= 'active' if params[:controller] == 'controller3' %&gt;"&gt; &lt;a href="/link"&gt;Link&lt;/a&gt; &lt;/li&gt; 
&lt;/ul&gt;
</code></pre>

blocks|key|396353|text|您可以使用tabulous作为链接|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|396354|有关如何将表格与twitter+bootstrap和Rails3.x结合在一起的文章here|396355|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/techiferous/tabulous|1|http://rubysource.com/too-good-to-be-true-twitter-bootstrap-meets-formtastic-and-tabulous/^0|5|8|0|0|16|4|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

you could use <a href="https://github.com/techiferous/tabulous" rel="nofollow">tabulous</a> for the links

article <a href="http://rubysource.com/too-good-to-be-true-twitter-bootstrap-meets-formtastic-and-tabulous/" rel="nofollow">here</a> on how to combine tabulous with twitter bootstrap and rails 3.x

blocks|key|612383|text|对于每个链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|612384|<%25+if+current_page?(home_path)+-%25><li+class="active"><%25+else+-%25><li><%25+end+-%25>
++<%25=+link_to+'Home',+home_path+%25>
</li>|code-block|syntax|javascript|612385|甚至是|612386|<li+<%25+if+current_page?(home_path)+-%25>class="active"<%25+end+-%25>>
++<%25=+link_to+'Home',+home_path+%25>
</li>|612387|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For each link:

<pre><code>&lt;% if current_page?(home_path) -%&gt;&lt;li class="active"&gt;&lt;% else -%&gt;&lt;li&gt;&lt;% end -%&gt;
 &lt;%= link_to 'Home', home_path %&gt;
&lt;/li&gt;
</code></pre>

or even

<pre><code>&lt;li &lt;% if current_page?(home_path) -%&gt;class="active"&lt;% end -%&gt;&gt;
 &lt;%= link_to 'Home', home_path %&gt;
&lt;/li&gt;
</code></pre>

blocks|key|612445|text|今天我也遇到了同样的问题，但用了另一种方法来解决。我在application_helper.rb中创建了一个助手函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|612446|def+navMainAktiv(actionName)
++++if+params[:action]+==+actionName++++
++++"active"
++++end
end|code-block|syntax|javascript|612447|链接看起来像这样：|612448|<li+class="<%25=+navMainAktiv('about')%25>"><%25=+link_to+"About",+about_path+%25></li>|612449|您可以用params[:controller]替换params[:action]，并在链接中设置您的控制器名称。|offset|length|style|CODE|612450|entityMap^0|0|0|0|0|4|J|P|F|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

Today I had the same question/problem but with an other approach for the solution.
I create a helper function in application_helper.rb:

<pre><code>def navMainAktiv(actionName)
 if params[:action] == actionName 
 "active"
 end
end
</code></pre>

and the link looks like this:

<pre><code>&lt;li class="&lt;%= navMainAktiv('about')%&gt;"&gt;&lt;%= link_to "About", about_path %&gt;&lt;/li&gt;
</code></pre>

You can replace <code>params[:action]</code> with <code>params[:controller]</code> and set your controller name in the link.

blocks|key|396474|text|你可以像这样使用(与@phil提到的非常相似，但略短一些)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396475|<ul+class="nav">
++<li+class="<%25=+'active'+if+current_page?(root_path)+%25>"><%25=+link_to+"Home",+root_path+%25></li>
++<li+class="<%25=+'active'+if+current_page?(about_path)+%25>"><%25=+link_to+"About",+about_path+%25></li>
++<li+class="<%25=+'active'+if+current_page?(contact_path)+%25>"><%25=+link_to+"Contact",+contact_path+%25></li>
</ul>|code-block|syntax|javascript|396476|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use something like (very similar to what @phil mentioned, but a little shorter):

<pre><code>&lt;ul class="nav"&gt;
 &lt;li class="&lt;%= 'active' if current_page?(root_path) %&gt;"&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/li&gt;
 &lt;li class="&lt;%= 'active' if current_page?(about_path) %&gt;"&gt;&lt;%= link_to "About", about_path %&gt;&lt;/li&gt;
 &lt;li class="&lt;%= 'active' if current_page?(contact_path) %&gt;"&gt;&lt;%= link_to "Contact", contact_path %&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|612498|text|https://github.com/twg/active_link_to|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|612499|<%25=+active_link_to+'Users',+users_path,+:wrap_tag+=>+:li+%25>|code-block|syntax|javascript|612500|#=>+<li+class="active"><a+href="/users">Users</a></li>|style|CODE|612501|entityMap|0|LINK|mutability|MUTABLE|url^0|0|11|0|0|0|0|1I|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Y|8|@$A|Z|B|10|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|4]]]]

<a href="https://github.com/twg/active_link_to" rel="noreferrer">https://github.com/twg/active_link_to</a>

<pre><code>&lt;%= active_link_to 'Users', users_path, :wrap_tag =&gt; :li %&gt;
</code></pre>

<code>#=&gt; &lt;li class="active"&gt;&lt;a href="/users"&gt;Users&lt;/a&gt;&lt;/li&gt;</code>

blocks|key|396552|text|使用此选项可根据当前路由选择nav中的活动链接，而无需服务器代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396553|++++$(document).ready(function+()+{
++++++++$('a[href="'+%2B+this.location.pathname+%2B+'"]').parent().addClass('active');
++++});|code-block|syntax|javascript|396554|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use this instead to select active link in nav based on the current route without server code: 

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

blocks|key|396590|text|我对每个li都使用这个|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|396591|<li><%25=+link_to_unless_current('Home',+root_path)+{++link_to('Home',+root_path,+class:+'active')+}+%25></li>|396592|entityMap^0|4|2|0|0|2Y|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I use this for each <code>li</code>:

<code>&lt;li&gt;&lt;%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %&gt;&lt;/li&gt;</code>

blocks|key|612668|text|当您可以在html_options散列中指定自定义class名称时，我使用build+in+view+helper+current_page?编写了简单的helper方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|612669|def+active_link_to(name+=+nil,+options+=+nil,+html_options+=+nil,+&block)
++active_class+=+html_options[:active]+%7C%7C+"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|code-block|syntax|javascript|612670|示例(当您在root_path路由上时)：|612671|<%25=+active_link_to+"Main",+root_path+%25>
#+<a+href="/"+class="active">Main</a>

<%25=+active_link_to+"Main",+root_path,+class:+"bordered"+%25>
#+<a+href="/"+class="bordered+active">Main</a>

<%25=+active_link_to+"Main",+root_path,+class:+"bordered",+active:+"disabled"+%25>
#+<a+href="/"+class="bordered+disabled">Main</a>|612672|entityMap^0|5|C|P|5|1M|D|0|0|6|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

I wrote simple helper method using build in view helper <code>current_page?</code> when you can specify custom <code>class</code> name in <code>html_options</code> hash.

<pre><code>def active_link_to(name = nil, options = nil, html_options = nil, &amp;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, &amp;block)
end
</code></pre>

Examples (when you are on <code>root_path</code> route):

<pre><code>&lt;%= active_link_to "Main", root_path %&gt;
# &lt;a href="/" class="active"&gt;Main&lt;/a&gt;

&lt;%= active_link_to "Main", root_path, class: "bordered" %&gt;
# &lt;a href="/" class="bordered active"&gt;Main&lt;/a&gt;

&lt;%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %&gt;
# &lt;a href="/" class="bordered disabled"&gt;Main&lt;/a&gt;
</code></pre>

blocks|key|396701|text|这里的许多答案都是可行的，或者是部分答案。我组合了一堆东西来使这个rails助手方法成为我使用的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396702|#+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]+%7C%7C=+""
++++html_options[:class]+<<+"+active+"
++end

++content_tag(:li,+html_options)+do
++++link_to(label,+link_params)
++end++++++
end|code-block|syntax|javascript|396703|它甚至可以通过参数检查来支持link_to上的&block等等。|offset|length|style|CODE|396704|entityMap^0|0|0|N|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Many of the answers here have things that will work, or partial answers. I combined a bunch of things to make this rails helper method I use:

<pre><code># helper to make bootstrap3 nav-pill &lt;li&gt;'s with links in them, that have
# proper 'active' class if active. 
#
# the current pill will have 'active' tag on the &lt;li&gt;
#
# html_options param will apply to &lt;li&gt;, not &lt;a&gt;. 
#
# 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] &lt;&lt; " active "
 end

 content_tag(:li, html_options) do
 link_to(label, link_params)
 end 
end
</code></pre>

It could be made even fancier with argument checking to support <code>&amp;block</code> on the link_to etc.

blocks|key|396764|text|我使用了一个帮助器，以Rails的表单帮助器的风格实现了这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396765|在帮助器(例如app/helpers/ApplicationHelper.rb)中：|offset|length|style|CODE|396766|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|code-block|syntax|javascript|396767|然后，在视图(例如app/views/layouts/application.html.erb)中：|396768|<%25=+nav_bar+do+%25>
++<%25=+nav_link+'Home',+root_path+%25>
++<%25=+nav_link+'Posts',+posts_path+%25>
++<%25=+nav_link+'Users',+users_path+%25>
<%25+end+%25>|396769|此示例生成(在'users‘页面上)：|396770|<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>|396771|entityMap^0|0|7|W|0|0|9|12|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

I used a helper to implement this in the style of Rails' form helpers.

In a helper (e.g. <code>app/helpers/ApplicationHelper.rb</code>):

<pre><code>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
</code></pre>

Then, in a view (e.g. <code>app/views/layouts/application.html.erb</code>):

<pre><code>&lt;%= nav_bar do %&gt;
 &lt;%= nav_link 'Home', root_path %&gt;
 &lt;%= nav_link 'Posts', posts_path %&gt;
 &lt;%= nav_link 'Users', users_path %&gt;
&lt;% end %&gt;
</code></pre>

This example produces (when on the 'users' page):

<pre><code>&lt;ul class="nav navbar-nav"&gt;
 &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="/posts"&gt;Posts&lt;/a&gt;&lt;/li&gt;
 &lt;li class="active"&gt;&lt;a href="/users"&gt;Users&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|396818|text|可以在application_helper.rb中定义帮助器方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|396819|def+create_link(text,+path)
++class_name+=+current_page?(path)+?+'active'+:+''

++content_tag(:li,+class:+class_name)+do
++++link_to+text,+path
++end
end|code-block|syntax|javascript|396820|现在，您可以使用like：|396821|create_link+'xyz',+any_path，它将呈现为|396822|<li+class="active">
++<a+href="/any">xyz</a>
</li>|396823|希望它能帮上忙！|396824|entityMap^0|3|L|0|0|0|0|R|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

You may define a helper method in <code>application_helper.rb</code>

<pre><code>def create_link(text, path)
 class_name = current_page?(path) ? 'active' : ''

 content_tag(:li, class: class_name) do
 link_to text, path
 end
end
</code></pre>

Now you can use like:

<code>create_link 'xyz', any_path</code> which would render as 

<pre><code>&lt;li class="active"&gt;
 &lt;a href="/any"&gt;xyz&lt;/a&gt;
&lt;/li&gt;
</code></pre>

Hope it helps!

blocks|key|612941|text|最短的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|612942|这处理nav和sub+nav列表元素。您可以将任何一个数组传递给单个路径，并将同时处理这两个路径。|612943|application_helper|612944|#+Active+page+method
def+ap(p:);'active'+if+p.class+==+Array+?+p.map{%7Cm%7C+current_page?+m}.any?+:+(current_page?+p)+end|code-block|syntax|javascript|612945|视图(html.erb)|612946|<ul+class="nav+navbar-nav">
++<li+class="<%25=+ap+p:+home_path+%25>">Home</li>
++<li+class="<%25=+ap+p:+account_path+%25>">Account</li>

++<li+class="dropdown+<%25=+ap+p:+[users_path,+new_user_path]+%25>">
++++<a+href="#"+class="dropdown-toggle"+data-toggle="dropdown">Users</a>
++++<ul+class="dropdown-menu"+role="menu">
++++++<li+class="<%25=+ap+p:+users_path+%25>">Users</li>
++++++<li+class="<%25=+ap+p:+new_user_path+%25>">Add+user</li>
++++</ul>
++</li>
</ul>|612947|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<h2>Shortest code </h2>
This deals with BOTH nav, and sub nav list elements. You can pass either an array a single path and will deal with both.
<h3>application_helper</h3>
<pre><code># Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end
</code></pre>
<h3>view (html.erb)</h3>
<pre><code>&lt;ul class=&quot;nav navbar-nav&quot;&gt;
 &lt;li class=&quot;&lt;%= ap p: home_path %&gt;&quot;&gt;Home&lt;/li&gt;
 &lt;li class=&quot;&lt;%= ap p: account_path %&gt;&quot;&gt;Account&lt;/li&gt;

 &lt;li class=&quot;dropdown &lt;%= ap p: [users_path, new_user_path] %&gt;&quot;&gt;
 &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Users&lt;/a&gt;
 &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
 &lt;li class=&quot;&lt;%= ap p: users_path %&gt;&quot;&gt;Users&lt;/li&gt;
 &lt;li class=&quot;&lt;%= ap p: new_user_path %&gt;&quot;&gt;Add user&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|396930|text|在Sinatra上使用ruby+..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396931|我使用的是bootstrap+bare主题，下面是导航条码示例。注意元素->+.nav的类名-因为这是在java脚本中引用的。|396932|/+Collect+the+nav+links,+forms,+and+other+content+for+toggling
++++#bs-example-navbar-collapse-1.collapse.navbar-collapse
++++++%25ul.nav.navbar-nav
++++++++%25li
++++++++++%25a{:href+=>+"/demo/one"}+Page+One
++++++++%25li
++++++++++%25a{:href+=>+"/demo/two"}+Page+Two
++++++++%25li
++++++++++%25a{:href+=>+"/demo/three"}+Page+Three|code-block|syntax|javascript|396933|在视图页面(或部分)中添加以下内容:javascript，这需要在每次页面加载时执行。|396934|haml视图代码片段->|396935|-+content_for+:javascript+do
++:javascript
++++++$(function+()+{
++++++++++$.each($('.nav').find('li'),+function()+{
++++++++++++++$(this).toggleClass('active',
++++++++++++++++++$(this).find('a').attr('href')+==+window.location.pathname);
++++++++++});
++++++});|396936|在javascript调试器中，确保'href‘属性值与window.location.pathname匹配。这与@Zitrax的解决方案略有不同，后者帮助我解决了问题。|396937|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Using ruby on Sinatra ..

I m using bootstrap bare theme, here is the sample navbar code. Note the class name of the element -> .nav - as this is referred in java script.

<pre><code>/ 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 =&gt; "/demo/one"} Page One
 %li
 %a{:href =&gt; "/demo/two"} Page Two
 %li
 %a{:href =&gt; "/demo/three"} Page Three
</code></pre>

in the view page (or partial) add this :javascript, this needs to be executed every time page loads.

haml view snippet ->

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

In the javascript debugger make sure you have value of 'href' attribute matches with window.location.pathname. This is slightly different than the solution by @Zitrax which helped me fixing my issue.

blocks|key|396983|text|下面是我所做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|396984|我创建了一个ViewsHelper并包含在ApplicationController中：|396985|include+ViewsHelper|code-block|syntax|javascript|396986|在ViewsHelper中，我创建了一个简单的方法，如下所示：|396987|def+page_state(path)
++current_page?(path)+?+'active'+:+''
end|396988|在我看来，我这样做：|396989|<li+class="<%25=+page_state(foobar_path)+%25>"><%25=+link_to+'Foobars',+foobar_path+%25></li>|396990|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here's what I did:

I created a ViewsHelper and included in ApplicationController:

<pre><code>include ViewsHelper
</code></pre>

Inside ViewsHelper I created a simple method like this:

<pre><code>def page_state(path)
 current_page?(path) ? 'active' : ''
end
</code></pre>

In my view I do this:

<pre><code>&lt;li class="&lt;%= page_state(foobar_path) %&gt;"&gt;&lt;%= link_to 'Foobars', foobar_path %&gt;&lt;/li&gt;
</code></pre>

blocks|key|613073|text|++def+active_navigation?(controllers_name,+actions_name)
+++'active'+if+controllers_name.include?(controller_name)+&&+actions_name.include?(action_name)
++end|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|613074|纤细|unstyled|613075|li+class=(active_navigation?(['events'],+['index',+'show']))+=+link_to+t('navbar.events'),+events_path|613076|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code> def active_navigation?(controllers_name, actions_name)
 'active' if controllers_name.include?(controller_name) &amp;&amp; actions_name.include?(action_name)
 end
</code></pre>

slim

<pre><code>li class=(active_navigation?(['events'], ['index', 'show'])) = link_to t('navbar.events'), events_path
</code></pre>

blocks|key|397050|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|397051|++++++++++<li+class="nav-item+<%25=+'active'+if+current_page?(root_path)+%25>"+>
++++++++++++<%25=+link_to+'Home',+root_path,+class:"nav-link"%25>
++++++++++</li>
++++++++++<li+class="nav-item+<%25=+'active'+if+current_page?(tools_path)+%25>"+>
++++++++++++<%25=+link_to+'Tools',+tools_path,+class:"nav-link"+%25>
++++++++++</li>
++++++++++<li+class="nav-item">
++++++++++++<a+class="nav-link"+href="#">Request+a+new+tool</a>
++++++++++</li>
++++++++++<li+class="nav-item+<%25=+'active'+if+current_page?(home_about_path)+%25>"+>
++++++++++++<%25=+link_to+'About+us',+home_about_path,+class:"nav-link"%25>
++++++++++</li>|code-block|syntax|javascript|397052|<%25=+%25>中的代码就是ruby，而=意味着对于您想要添加到导航栏中的每个选项，该代码的结果将显示在HTML.Do+this上，它应该工作得很好。|offset|length|style|CODE|397053|entityMap^0|0|0|0|6|C|4|I|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

This worked for me:
<pre class="lang-html prettyprint-override"><code> &lt;li class=&quot;nav-item &lt;%= 'active' if current_page?(root_path) %&gt;&quot; &gt;
 &lt;%= link_to 'Home', root_path, class:&quot;nav-link&quot;%&gt;
 &lt;/li&gt;
 &lt;li class=&quot;nav-item &lt;%= 'active' if current_page?(tools_path) %&gt;&quot; &gt;
 &lt;%= link_to 'Tools', tools_path, class:&quot;nav-link&quot; %&gt;
 &lt;/li&gt;
 &lt;li class=&quot;nav-item&quot;&gt;
 &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Request a new tool&lt;/a&gt;
 &lt;/li&gt;
 &lt;li class=&quot;nav-item &lt;%= 'active' if current_page?(home_about_path) %&gt;&quot; &gt;
 &lt;%= link_to 'About us', home_about_path, class:&quot;nav-link&quot;%&gt;
 &lt;/li&gt;
</code></pre>
The code inside the <code>&lt;%= %&gt;</code> is just <code>ruby</code>, and the <code>=</code> means that the result of that code will be displayed on the HTML.Do this for every option you want to add in your navbar and it should work fine.

I'm not understanding how Twitter Bootstrap does active links for the navigation. If I have a regular navigation like this (with ruby on rails linking):

<pre><code>&lt;ul class="nav"&gt;
 &lt;li class="active"&gt; &lt;a href="/link"&gt;Link&lt;/a&gt; &lt;/li&gt;
 &lt;li class=""&gt; &lt;a href="/link"&gt;Link&lt;/a&gt; &lt;/li&gt;
 &lt;li class=""&gt; &lt;a href="/link"&gt;Link&lt;/a&gt; &lt;/li&gt; 
&lt;/ul&gt;
</code></pre>

How do I keep it active based on the link clicked?

How to get Twitter-Bootstrap navigation to show active link?

服务器

调试器

路由

我不明白Twitter Bootstrap是如何为导航做活动链接的。如果我有一个像这样的常规导航(使用ruby on rails链接)：<ul class="nav"> <li class="active"> <a href="/link">Link</a> </li> <li class=""> <a href=...

问如何让Twitter-Bootstrap导航显示活动链接？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Twitter-Bootstrap导航显示活动链接？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Twitter-Bootstrap导航显示活动链接？
EN