我有导航附件导航,想要在滚动时更改活动的li。我已经尝试了文档中给出的但无法解决的问题。有人可以帮我修理吗?您可以在网址http://www.thephpcode.com/help/website-generation-using-pcg.html
中查看我的网页答案 0 :(得分:14)
您要求的功能由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)。
但是没有不同的样式应用于链接。这是因为您需要使用导航栏修复一些内容。 Bootstrap 3中不再使用nav-list
。请使用类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
类应用于“设置”链接,而不是“设计”链接。
检查此工作demo。