Highlighting the Active Parent in Multi-Level Navigation Header with Jekyll and Bootstrap(使用Jekyll和Bootstrap突出显示多级导航标题中的活动父项)
问题描述
我的网站同时使用Jekyll和Bootstrap,主导航标题是一个下拉列表。我希望每当用户在相应的子页面(例如,解决方案>解决方案1)上时,父项目(例如,解决方案)在页眉中突出显示。
我的Jekyll导航文件(Navigation.yml)格式如下:
- title: Solutions
url: /solutions
subpages:
- title: Solution 1
url: /solutions/1
- title: Solution 2
url: /solutions/2
- title: Solution 3
url: /solutions/3
- title: Products
url: /products
subpages:
- title: Product A
url: /products/a
- title: Product B
url: /products/b
- title: Product C
url: /products/c
我的导航HTML文件(top-navbar.html)如下所示:
<header class="navbar " role="navigation" style="margin-bottom: 0">
<div class="container main-header">
<div class="navbar-header">
<button class="navbar-toggle bar-button" type="button" data-toggle="collapse" data-target=".site-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="/static/img/logo.png">
</a>
</div>
<div class="collapse collapse-inverse navbar-collapse site-navbar-collapse">
<ul class="nav navbar-nav navbar-right site-nav">
{% for section in site.data.navigation %}
<li class="dropdown " >
<a href="{{ section.url }}">{{ section.title }}</a>
{% if section.subpages %}
<ul class="dropdown-menu " >
{% for page in section.subpages %}
<li ><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</header>
而Site-NAV类的CSS如下所示:
.site-nav:last-child{margin-right:15px;}
.site-nav>li>a{padding:10px 17px;color:#545454;}
.site-nav>li>a.selected{background-color:#acacac;color:#f9f9f9;}
.site-nav>li>a.current{background-color:#acacac;color:#f9f9f9;}
是否有一种简单的方法可以将突出显示添加到活动页面父级的导航页眉?
推荐答案
在菜单中设置当前页面链接上的活动类。替换:
{% for page in section.subpages %}
<li ><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
由
{% for p in section.subpages %}
<li{% if p.url == page.url %} class="active"{% endif %}>
<a href="{{ site.baseurl }}{{ p.url }}">{{ p.title }}</a>
</li>
{% endfor %}
请注意,我不执行{% for page in section.subpages %}
操作,因为page
是保存当前页面数据的现有变量。
因为我们不能使用纯css选择活动链接父对象,所以我们使用一些jQuery。将其放置在页面底部,紧靠结束Body标记之前。
<script>$("li.active").parents('li').toggleClass("active");</script>
这篇关于使用Jekyll和Bootstrap突出显示多级导航标题中的活动父项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用Jekyll和Bootstrap突出显示多级导航标题中的活动父项
基础教程推荐
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 动态更新多个选择框 2022-01-01
- 在for循环中使用setTimeout 2022-01-01