Bootstrap Scrollspy не работает

Я пытаюсь реализовать фиксированное боковое меню, которое обновляет ссылку активной страницы с активным классом. Я поместил спиральные элементы HTML5 на тело, но у меня проблемы. Может ли кто-нибудь проверить мою страницу и посмотреть, смогут ли они определить, что не так?Bootstrap Scrollspy не работает

http://mattaltepeter.com/new/about.shtml

источник

2013-03-08 Matt Altepeter

Проблема в том, что вы разместили свой СЧА внутри DIV и чем использовать навигационный идентификатор для свитка. Для того, чтобы сделать scrollspy работать Вы можете назначить «побочное NAV» на span3 DIV как: Jsfiddle demo in browser

<div class="row"> 
<div class="span3" id="side-nav"> 
    <ul class="nav nav-list about-list hidden-phone hidden-tablet affix" > 
     <li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li> 
     <li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li> 
     <li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li> 
     <li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li> 
    </ul> 
</div>

Вы можете создать свой пункт раздел следующим образом:

<div class="page-header" id="about"> 
     <h1 >About Me</h1> 

    <p>My name is Matt Altepeter. I am 21 years old .</p> 
    </div>

Пожалуйста, удалите скрипт инициализации скроллинг, так как вы уже добавили их к телу

<body data-offset="50" data-target="#side-nav" data-spy="scroll">

Его хорошая практика, чтобы объявить bootstrap.js просто перед jquery и перед любым другим скриптом. Поместите весь свой скрипт в нижний колонтитул, чтобы сохранить время загрузки.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

источник

2013-03-08 11:17:32 Shail

Благодарю вас. Это заставило его работать в основном. Единственная проблема в том, что когда страница загружается, последний элемент меню выделяется по умолчанию, даже если я вручную назначил 'class =" active "' для первого элемента. Какие-либо предложения? –

Проблема заключается в вашем разделе скрипта javascript, который вы используете для добавления класса active. – Shail

Я удалил все в теге скрипта, кроме как для инициализации scrollspy, и он по-прежнему устанавливает, что последний элемент навигации активен при загрузке страницы. –

ответ

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