Создавая один веб-сайт страницы, я хочу, чтобы меню было подсвечено в зависимости от того, в каком разделе я нахожусь на странице. Я использую плагин jquery.nav.js.
Все работает по мере необходимости, пока я не нажму на одну из ссылок меню, тогда раздел меню останется на выделенной ссылке при перемещении по странице.
здесь находится сайт: http://www.onepixelroom.com/londonrefurb/
сценарий:
<script type="text/javascript" src="js/jquery.nav.min.js"></script>
<script>
$(document).ready(function() {
$('#nav').onePageNav();
});
</script>
nav html:
<ul id="nav">
<li><a href="#second" class="smoothScroll">about</a></li>
<li><span class="bar">|</span></li>
<li><a href="#fourth" class="smoothScroll">services</a></li>
<li><span class="bar">|</span></li>
<li><a href="#sixth" class="smoothScroll">portfolio</a></li>
<li><span class="bar">|</span></li>
<li><a href="#eight" class="smoothScroll">contact</a></li>
</ul>
и CSS:
#nav {
list-style-type: none;
height: 80px;
width: 325px;
margin: auto;
float: right;
position: relative;
top: 7px;
color: #5B5B5B;
}
/*
color:#49E2D6;
*/
#nav .current a {
color: #40E4F2;
}
#nav a:hover {
color:#40E4F2;
}
#nav li {
float: left;
}
#nav a {
text-transform: uppercase;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
}
Если кому-то это нужно, я исправил это, добавив к каждому классу ".current" и добавляя к скрипту
JavaScript
<script>
$(document).ready(function(){
$('#nav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
HTML:
<ul id="nav">
<li><a href="#second" class="current">about</a></li>
<li><span class="bar">|</span></li>
<li><a href="#fourth" class="current">services</a></li>
<li><span class="bar">|</span></li>
<li><a href="#sixth" class="current">portfolio</a></li>
<li><span class="bar">|</span></li>
<li><a href="#eight" class="current">contact</a></li>
</ul>
Пожалуйста, поправьте меня, если я допустил ошибку.