2016-03-03 5 views
0

У меня есть простая проблема с scrollspy bootstrap 3, где «активный» тег li не активируется при прокрутке вверх/вниз по странице. Все остальное о scrollspy работает, как и ожидалось.Bootstrap scrollspy active selector

Я видел все другие проблемы с переполнением стека относительно этого и экспериментировал в jsfiddle около двух часов без каких-либо успехов.

Использование инструментов dev и настроек и li to: active вручную показывает желаемый эффект.

HTML

<header> 
    <nav class="navbar navbar-default navbar-fixed-top" id="spy-navbar"> 
     <div class="container text-center"> 
     <ul class="nav navbar-nav inline"> 
      <li> <a href="#one" class="smooth-scroll">ONE</a> </li> 
      <li> <a href="#two" class="smooth-scroll">TWO</a> </li> 
      <li> <a href="#three" class="smooth-scroll">THREE</a> </li> 
      <li> <a href="#four" class="smooth-scroll">FOUR</a> </li> 
     </ul> 
     </div> 
    </nav> 
    </header> 

    <main class="container"> 
    <article id="one">one</article> 
    <article id="two">two</article> 
    <article id="three">three</article> 
    <article id="four">four</article> 
    </main> 

</body> 

CSS

li > a:hover, 
li:active { 
    border-bottom: 2px solid #2d9fff; 
} 

Мой jsfiddle ссылка находится здесь: https://jsfiddle.net/hswg5j3q/

Может кто-нибудь проверить мою jsfiddle и посмотреть, что мне не хватает? Спасибо заранее.

ответ

1

Это потому, что ваша скрипка не включает bootstrap.js. JS необходим для компонента ScrollSpy.

Работы по бутилированию: http://bootply.com/wJHL1Vqpdi

Смежные вопросы