在bootstrap 3.0中如何设置活动类

时间:2013-08-29 14:05:31

标签: javascript twitter-bootstrap affix

我有导航附件导航,想要在滚动时更改活动的li。我已经尝试了文档中给出的但无法解决的问题。有人可以帮我修理吗?您可以在网址http://www.thephpcode.com/help/website-generation-using-pcg.html

中查看我的网页

1 个答案:

答案 0 :(得分:14)

您要求的功能由Scrollspy插件提供。另一方面,affix所做的只是在某个偏移之后为您提供固定的nav。由于词缀经常与Scrollspy结合使用,这可能会导致每个插件的作用混乱。

要在页面中使用scrollspy插件,请将以下属性添加到页面的<body>元素中。

  1. 将标识符添加到<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">
    
  2. 将Scrollspy插件应用于<body>元素:

    <body style="" data-spy="scroll" data-target="#sidenav">
    
  3. 现在滚动时切换active类(请参阅demo)。


    但是没有不同的样式应用于链接。这是因为您需要使用导航栏修复一些内容。 Bootstrap 3中不再使用nav-list。请使用类nav-pillsnav-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