Question

我在使用active_link_to显示第n个css按钮/列表元素时遇到问题。第一个css按钮显示没有问题，它是活动的。当我向列表中添加新按钮时，它们会消失。

HTML

<li class="nav-item">
            <%= active_link_to '', profile_path, class_active: 'nav-link home-icon-btn active', :class_inactive => 'nav-link', active: :exclusive %>
          </li>
          <li class="nav-item">
            <%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link' %>
          </li>

CSS

.home-icon-btn {
  background:url('white-home-btn-state-1.png') no-repeat;
  cursor:pointer;
  border:none;
  height: 53px;
  width: 50px;

}

.home-icon-btn:hover {
  background: url('white-home-btn-state-2.png') no-repeat;
  cursor: pointer;
}

.analytics-icon-btn {
  background:url('white-analytics-btn-state-1.png') no-repeat;
  cursor:pointer;
  border:none;
  height: 53px;
  width: 50px;
}

.analytics-icon-btn:hover {
  background: url('white-analytics-btn-state-2.png') no-repeat;
  //cursor: pointer;
}
a.active {
  border-bottom: 2px white solid;
  border-spacing: 5px;
  border-collapse: separate;
}

Answer 1

我还必须将按钮的css类添加到非活动状态。

<%= active_link_to '', analytics_path, class_active: 'nav-link analytics-icon-btn active', :class_inactive => 'nav-link analytics-icon-btn' %>

当非活动的CSS img按钮时，active_link_to列表项正在消失

1 个答案: