Ruby on Rails:如何保持单击的link_to_current_unless不会出现在导航栏之外?

时间:2017-05-21 17:05:13

标签: ruby-on-rails twitter-bootstrap-3 navbar nav

我有一个导航栏,右边有几个链接以及品牌名称右侧的两个区域设置链接,当它不是特定的URL时显示。当我点击右对齐的链接时,链接保持在相同的位置。当我单击左侧的其中一个区域设置链接时,我单击的链接显示为已点击但位于导航栏上方。

这是最初显示网站时屏幕的样子。

这是单击法语链接时屏幕的样子。可能很难看到,但法语链接出现在稍大的字体下划线。当我点击它们时,我希望它看起来像右边的链接。

enter image description here

以下是导航栏的代码。我还在容器流体div中以及两个div之间使用了if语句。我仍然得到相同的结果。

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "#{t :geometry3d2d}", locale_root_path, class: "navbar-brand"  %>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    

      <% if "#{request.host_with_port}" == "myrequesthost" %>
      <% else %>
        <ul class="nav navbar-nav">
          <li><%= link_to_unless_current "#{t :english}", locale: "en" %></li>
          <li><%= link_to_unless_current "#{t :french}", locale: "fr" %></li>
        </ul>
      <% end %>

      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "#{t :link_home}", locale_root_path %></li>
        <li><%= link_to "#{t :link_store}", store_path %></li>
        <li><%= link_to "#{t :link_books}", store_path(anchor: "#{t :books}") %></li>
        <li><%= link_to "#{t :link_tesserart}", store_path(anchor: "tesserart") %></li>
        <li><%= link_to "#{t :link_affiliates}", affiliates_path %></li>
        <li><%= link_to "#{t :link_geometry}", geometry_path %></li>
        <li><%= link_to "#{t :link_terms}", terms_path %></li>
        <li><%= link_to "#{t :link_vision}", locale_root_path(anchor: "vision") %></li>
        <li><%= link_to "#{t :link_contact}", contact_path %></li>
      </ul>
    </div>
  </div>
</nav>
<%= content_tag(:div, content_tag(:a, "", id: "top"), class: "anchor") %>

我在网络搜索中找不到与此问题相关的任何内容。 if语句中<ul>与另一个语句之间的唯一区别是:(1)我使用link_to_unless_current而不是link_to和(2)我没有&#39;包括班级navbar-right。我希望添加一个类可以解决这个问题,但不知道在哪里看。

1 个答案:

答案 0 :(得分:0)

我通常使用link_to_unless_current选定的区域设置链接受到保护,其他区域设置链接显示为链接。该功能对于该项目并不重要。

我决定再看看我在<ul>声明中提到的差异。我决定将link_to_unless_current更改为link_to,看看发生了什么。区域设置链接的行为类似于导航栏右侧的链接,并在英语和法语之间切换。