Question

我正在使用Jekyll为我的网站设置主题。

我正在使用Bootstrap示例主题，我目前面临一个问题，即Home按钮保持按下＆＃39;在另一个页面上，例如关于页面。

以下是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

按钮在Bootstrap主题中保持“按下”状态

1 个答案: