active_link_to非アクティブなCSSのimgボタン

Question

nth CSSボタン/リスト要素をactive_link_toで表示するのに問題があります。最初の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' %>