Кнопка остается нажатой в теме Bootstrap

Question

Я нахожусь в процессе настройки темы для своего сайта с помощью Jekyll.

Я использую тему примера Bootstrap для этого, и в настоящее время я сталкиваюсь с проблемой, когда кнопка «Домой» остается нажатой на другой странице, такой как страница «О программе».

Вот ссылка на файл CSS: https://github.com/Dansmithyy/dansmeuktheme/blob/master/css/main.scss

Есть ли способ изменить это так, чтобы кнопки оставаться нажатой, когда пользователь находится на этой конкретной странице?

Answer 1

Ваше главное меню жестко закодировано в html. И он остается неизменным на всех ваших страницах.

<li class="active"><a href="/">Home</a></li> 
<li><a href="/about">About</a></li> 
<li><a href="/contact">Contact</a></li> 

Мой код инспектор сказал мне, что правило применяется к

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.active>a 

Вот происхождение симптома.

Настоящая причина вашей проблемы в том, что вы жестко кодируете свое главное меню.

Если посмотреть в оригинальном default.html файл, а затем в _includes/header.html вы можете увидеть такие вещи, как {% include header.html %} и {% for page in site.pages %}...

Последняя метка поможет вам автоматически генерировать меню. Я добавил активный класс трюка в нем, чтобы сэкономить ваше время:

<ul class="nav navbar-nav"> 
{% for node in site.pages %} 
    {% if node.title %} 
    <li class="{% if page.url == node.url %} active{% endif %}"> 
    <a href="{{ node.url | prepend: site.baseurl }}">{{ node.title }}</a> 
    </li> 
    {% endif %} 
{% endfor %} 
</ul> 

ПРИМЕЧАНИЮ{% if node.title %} если вы хотите страницы отображались в меню необходимо поставить title переменные в вводной части страницы. например: title: My nice title