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