我有一个标题,我打算在所有页面的顶部使用它。我想将它保存在一个单独的文件中(这是我习惯用 php
做的事情,但我是 Bootstrap 世界的新手);但是,我不确定如何将 active
类动态分配给代表当前页面的 nav-item
。 Bootstrap (4) 是否有针对此类事情的内置解决方案?我一直在四处寻找,但还没有找到好的解决方案。提前致谢!
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
最佳答案
Bootstrap 包含一些 jQuery 而不仅仅是 CSS。但是,您始终可以在页面加载时运行一些 JavaScript 或 jQuery,这些 JavaScript 或 jQuery 会根据加载页面时读取的元素来切换类。例如你可以:
1) 在每个页面上都有一个标识符(例如,页面上包含页面名称/值的元素内的类名称)。示例:
<h1 class="page-lookup">
Home
</h1>
2) 在函数中设置 jQuery 以读取类并使用 .val() 获取元素的值。示例:
const activePage = $(".page-lookup").val()
3) 在您的导航栏中为每个
<li id="home-page" class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
4) 运行一个 switch case,查找匹配的存储值 (activePage)。在匹配的情况下,您可以运行 jQuery 来更新类以包含将触发 Bootstrap 格式化的“事件”语法。
示例:
switch (activePage) {
case Home:
$('#home-page).attr("class", "nav-item active");
break;
case About:
$('#about-page).attr("class", "nav-item active");
break;
}
关于html - 如何在公共(public)标题中指示事件的导航项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46735526/