开关<li>有源元件

将数据角色=导航属性添加到导航所在的ul元素, 在这个fiddle的javascript部分中,

请尝试使用以下代码,

 $(function()
  {
  $("[data-role=navigate]").find("li > a").click(function()
    {
        $(this).parents("ul").find("li.active").removeClass("active");
        $(this).parent().addClass("active");
    })

  })

我将简要解释代码的作用。。。

1) 将单击事件处理程序绑定到<a>内部<li>其在<ul>具有属性数据角色=导航

2) 单击时,将删除当前元素的活动类。

3) 将活动类分配给<a>

通过在DOM元素中放置属性并使用该属性连接事件侦听器,可以针对JS中的特定需求。

希望它有帮助!

Bootstrap的 Affix 在这种情况下可能是有用的。它突出显示页面的哪个部分显示在页面的单独子导航部分的屏幕上。

顺便说一下,如果你有Bootstrap代码,你可以在 Bootply 非常容易。默认情况下,它提供Bootstrap的CSS和JavaScript文件。

你说你不熟悉JavaScript,但你要求的是需要JavaScript的功能。如果你不能自己编写插件,我建议你尝试使用它。

Waypoints可以满足您的需求: http://imakewebthings.com/waypoints/guides/getting-started/