Как сохранить активный активный цвет bg, чтобы он оставался активным, когда на странице?

Я использую rails 4.0.1 с ruby 2.0.0 и последние bootstrap.Как сохранить активный активный цвет bg, чтобы он оставался активным, когда на странице?

У меня есть Navbar с навигационных ссылок, которые ведут на другую страницу, таких как дома, О нас, Контакты и т.д.

Я получил Navbar по умолчанию hover link bg color, чтобы изменить, но я не могу сохранить цвет фона ссылки, чтобы оставаться в этом цвете, когда я на самом деле нажимаю ссылку и перехожу на эту страницу.

Вот код:

CSS:

$navbar-default-bg: #9B242D; 
$navbar-default-link-color: white; 
$navbar-default-link-hover-bg: #BC3F49; 
$navbar-default-link-active-bg: #BC3F49; 
$navbar-default-link-active-color: white;

_header.html.erb

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right navbar-links navbar-default"> 

     <li><%= link_to "About Us", about_path %></li> 
     <li><%= link_to "Our Mission", mission_path %></li> 
     <li><%= link_to "The Founders", founder_path %></li> 
     <li><%= link_to "Current Events", current_events_path %></li> 
     <li><%= link_to "Donations", donations_path %></li> 
     <li><%= link_to "Contact", contact_path %></li> 

    </ul> 
    </div><!-- /.navbar-collapse -->

источник

2014-02-04 hanothan

вам нужно добавить класс active к <li>, когда и находятся на этой странице, чтобы сделать это

<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About Us", about_path %></li> 
<li class="<%= 'active' if current_page?(mission_path) %>"><%= link_to "Our Mission", mission_path %></li>

и так далее.

источник

2014-02-04 07:48:01

Это не работает :(У меня есть эта навигационная панель как частичная страница, которая автоматически отображается на всех страницах. Idk, если эта информация помогает, но да, я пробовал это, и это не сработало. – hanothan

Nevermind это сработало после того, как я изменил 'active -bg ', чтобы просто «активно»! – hanothan

поэтому его ошибка позволила мне исправить это., спасибо –

Я предлагаю использовать JavaScript, чтобы добавить класс «current- страница ", которая будет корректировать цвет фона вышеупомянутой ссылки. Это будет включать добавление классов к вашему все ваши < li> идентифицировать их, и вы можете использовать что-то вроде

window.location

, чтобы получить текущий URL страницы включен. например

<li class="js-contact"><%= link_to "Contact", contact_path %></li>

Активные классы ссылок больше для внутристраничного табуляции.

источник

2014-02-04 07:28:40

Как сохранить активный активный цвет bg, чтобы он оставался активным, когда на странице?

ответ

Смежные вопросы