Написал такую менюшку
window.onload = function(){
var item = document.getElementById("main_nav").children;
for( var i = 0; i < item.length; i++){
$(item[i]).click(function(e){
e.preventDefault();
var attr = this.firstChild.getAttribute("href");
this.firstChild.style.color = "white";
$('html, body').animate({
scrollTop:$(attr).offset().top - 100
}, 1000);
console.log(mystyle);
});
};
}
HTML
<div class="wrap">
<ul id="main_nav">
<li><a href="#veryTop">Самый верх</a></li>
<li><a href="#top">Верх</a></li>
<li><a href="#midle">Середина</a></li>
<li><a href="#footer">Подвал</a></li>
<li><a href="#copy">Копирайт</a></li>
</ul>
<a name="veryTop" id="veryTop">Самый верх</a>
<a name="top" id="top">Верх</a>
<a name="midle" id="midle">Середина</a>
<a name="footer" id="footer">Подвал</a>
<a name="copy" id="copy">Копирайт</a>
</div>
И естественно мне захотелось, что бы выбранный пункт меню подсвечивался, на что я написал такую строку, this.firstChild.style.color = "white";
, но если я нажму на второй пункт меню, первый так же останется белого цвета, как и вновь выбранный, единственное что я смог придумать, это взять все соседние элементы и на них повесить .style.color = "blue";
, но как выбрать все элементы и справа и слева?
UPDATE
$(item[i]).click(function(e){
e.preventDefault();
var attr = this.firstChild.getAttribute("href");
var z = document.getElementsByClassName("jj");
z.classList.remove("jj");
this.classList.add("jj");
$('html, body').animate({
scrollTop:$(attr).offset().top - 100
}, 1000);
console.log(z.classList);
});