Bootstrap - 在导航栏中更改活动类

时间:2017-05-15 15:19:49

标签: jquery html css twitter-bootstrap

我知道这个问题被问了超过一百万次,但是我还没有填补空白。

我有一个非常基本的导航栏结构,如下所示:

{{1}}

我的实际结构更复杂,所以我减少了大部分代码,就像其他链接和条件一样,以提高可读性。 我改变了这样的活跃类:

{{1}}

除了我的本地化链接之外,它适用于所有链接('条目1','条目2'等)。我想要的只是给这些链接提供活跃的类,但是到目前为止,我所读到的任何内容都没有为我工作(我使用这个thread来检查我哪里出错了)。当我改变本地化时,我没有控制台错误,显然我添加了“活跃的”#39;在浏览器的编辑器中手动编写类,但不能使用我的代码。 有什么想法?提前感谢您的时间,感谢任何评论或回答!

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。这不是一个常见的问题(至少我在google搜索时没有发现它),但无论如何我都会发布我的解决方案以防万一有人也面临这样的问题。我的问题是unless语句错误,这就是我的工作方式:

<% unless I18n.locale == :en %>
    <li class="nav-item">
        <%= link_to "EN", locale: :en %>
    </li>
<% else %>
    <li class="nav-item active">
        <a class='nav-link'>EN</a> 
    </li>
<% end %>
<% unless I18n.locale == :fr %>
    <li class="nav-item">
        <%= link_to "FR", locale: :fr %>
    </li>
 <% else %>
     <li class="nav-item active">
         <a class='nav-link'>FR</a>
     </li>
 <% end %>

因此,如果用户选择了locale,我只需显式传递active类。