我有带有自举词缀的导航,并且想在滚动时更改活动的li。我已经尝试过文档中给出的内容,但无法修复。有人可以帮我修复它吗?您可以在url http://www.thephpcode.com/help/website-generation-using-pcg.html中看到我的页面
Scrollspy插件提供了您要的功能。另一方面,所有affix
要做的就是为您提供nav
一定偏移量后的固定值。由于词缀通常与Scrollspy结合使用,因此对于每个插件的作用可能会造成混淆。
要scrollspy
在页面中使用插件,请将以下属性添加到<body>
页面的元素中。
将标识符添加到列表元素的<div>
容器中nav
:
<div class="col-md-3" id="sidenav">
<ul class="nav nav-list pcg-help-affix affix-top" data-toggle="affix" data-spy="affix" data-offset-top="200" id="navbar2">
将Scrollspy插件应用于您的<body>
元素:
<body style="" data-spy="scroll" data-target="#sidenav">
现在,active
在滚动时切换类(请参见demo)。
但是不会对链接应用任何不同的样式。这是因为您需要用导航栏修复一些问题。nav-list
不再在Bootstrap 3中使用。而是改用类nav-pills
,nav-stacked
以达到很好的效果:
<ul class="nav nav-pills nav-stacked pcg-help-affix affix-top" data-toggle="affix" data-spy="affix" data-offset-top="200" id="navbar2">
另外,初始页面应将.active
类应用于“设置”链接,而不是“设计”链接。
检查此工作演示。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句