我创建一个带有导航栏的长页面,使用引导nav-tabs,点击导航栏打开它们各自的子导航栏(tab-content),导航内容然后锚点将您引导至页面的某个位置并添加“活动”类。在滚动时,也会添加活动类以显示页面上的当前位置。添加活动的类到导航列表里滚动
我的问题是,当我到达下一个导航选项卡的标签内容时,导航列表li应该变为活动状态并显示其标签内容,就像当我物理单击选项卡时一样。如何使滚动条上的导航标签页激活?
为了显示我的问题,我已经做了的jsfiddle: https://jsfiddle.net/Felirou/qLwcm15a/14/
正如你可以看到,滚动页面时,子菜单中的相应的锚(标签内容)使用下面的jQuery的变得活跃。但是,当达到橙色/紫色时,导航标签不会变为活动状态,但当您点击它时,您会看到其内容已变为活动状态。
<!-- the navbar -->
<div class="row" id="navbar">
<ul class="nav nav-tabs">
<li id="navbarPresentation" class="active"><a data-toggle="tab" href="#menu1">Green/Blue</a></li>
<li id="navbarIntroduction"><a data-toggle="tab" href="#menu2">Orange/Purple</a>
</ul>
<!-- This is the sub-menu of the header, the tab-content -->
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<nav class="navbar-nav">
<a class="nav-item nav-link" href="#green"><h5>green</h5></a>
<a class="nav-item nav-link" href="#blue"><h5>blue</h5></a>
</nav>
</div>
<div id="menu2" class="tab-pane fade">
<nav class="navbar-nav">
<a class="nav-item nav-link" href="#orange"><h5>orange</h5></a>
<a class="nav-item nav-link" href="#purple"><h5>purple</h5></a>
</nav>
</div>
</div>
</div>
// onScroll event for the sub nav also called the tab-content
$(document).on("scroll", onScroll);
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.tab-content a').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.tab-content a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
我已经尝试了很多不同的东西,所以我不知道哪个失败的尝试后。但我想我必须用parent()或者一些布尔型的true/false来为li添加一个类,但我似乎无法使它工作。有人能帮助我或指出我的方向吗?
提前,非常感谢!
你可以请张贴html。有关未来的问题,请关注[如何创建最小,完整和可验证示例](https://stackoverflow.com/help/mcve)。 –
我把它清理了一下,并添加了一个jsfiddle,这将做的HTML所要求? :-) – Felirou