javascript - Bootstrap 词缀不会更改事件选项卡

Question

代码是我公司前前端开发人员写的。他离开后，我被要求编辑这个页面。当我完成 CSS 的工作时，我发现以前有效的词缀总是会激活最后一个 li 元素。我尝试了很多方法，但不知道为什么会这样。

示例代码:

<ul id="myNav" class="nav nav-tabs nav-stacked">
  <li><a href="#section-1">关于Speed Dating</a></li>
  <li><a href="#section-2">活动流程</a></li>
  <li><a href="#section-3">成功案例</a></li>
  <li><a href="#section-4">往期回顾</a></li>
  <li><a href="#section-5">地点</a></li>
  <li><a href="#section-6">合作伙伴</a></li>
</ul>
......
<h2 id="section-1">关于Speed Dating</h2>
<h2 id="section-2">关于Speed Dating</h2>
......

整个代码在CodePen上

Answer 1

最后我发现是因为以前标有属性data-spy="scroll"data-target="#myScrollspy"的现在在div元素上了。

我删除body标签是因为之前的HTML有两个body标签，第一个是在base template中设置的，第二个是用HTML写的绑定(bind)bootstrap affix。因此，在我将第二个 body 标记更改为 div 后，bootstrap 词缀不起作用。

TL，NR:它在我将属性 data-spy="scroll"data-target="#myScrollspy" 添加到 body 元素后修复。