https://stackoverflow.com/questions/22468665
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianOkay so ... in order for this to work in an extensible way, you will need to separate those inline onclick functions to an external handler. Which you should be doing anyway, especially if using jQuery cuz its so easy. I won't go into the details on that too much, but regardless, update your script as such:
$(function(){
// scroll stuff
$('.vnav').on('click','a',function(){
var self = this,
eqNum = (parseInt(self.href.slice(-1),10) - 1);
$('.active')
.removeClass('active')
.parent()
.find('.section')
.eq(eqNum)
.addClass('active');
$('.show').removeClass('show');
$(self).find('span').addClass('show');
});
});
This capitalizes on delegation so there is only one click handler, but also reduces the amount of DOM traversal. It captures the "counter value" in the href of the link which corresponds to the id of the section to activate. Then it removes the active class for the currently active item, searches for the new active based on the link clicked, and adds the active class to it. Finally, it removes the active show span, and adds it to the span inside the link clicked.
Not tested, but should work.
EDIT
Lets get the scroll involved! Might as well build out the entire function now:
$(function(){
var $navLinks = $('.vnav').find('a');
$('.section').first().addClass('active');
$(window).on('scroll',function(e){
e.preventDefault();
var $active = $('.active'),
$show = $('.show'),
delta = (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1);
if (delta < 0) {
var $next = $active.next(),
$nextLink = $next.get(0).id;
if(next.length){
var timer = setTimeout(function(){
$('body, html').animate({
scrollTop:$next.offset().top
},1200,'swing');
$active.removeClass('active');
$next.addClass('active');
$show.removeClass('show');
$navLinks.filter(function(){
return this.href === '#'+$nextLink
}).find('span').addClass('show');
clearTimeout(timer);
},420);
}
} else {
var $prev = $active.prev(),
$prevLink = $prev.get(0).id;
if(prev.length){
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop:$prev.offset().top
},1200,'swing');
$active.removeClass('active');
$prev.addClass('active');
$show.removeClass('show');
$navLinks.filter(function(){
return this.href === '#'+$prevLink
}).find('span').addClass('show');
clearTimeout(timer);
}, 420);
}
}
});
$('.vnav').on('click','a',function(){
var self = this,
eqNum = (parseInt(self.href.slice(-1),10) - 1);
$('.active')
.removeClass('active')
.parent()
.find('.section')
.eq(eqNum)
.addClass('active');
$('.show').removeClass('show');
$(self).find('span').addClass('show');
});
});
Again untested, but hopefully should be okay. I cached .vnav's a elements, which is combined on the scroll process with a filtering of the elements to match the ID that corresponds to the appropriate link. Once this link is found, we can apply the span. I also did a couple of optimizations, and bound the scroll event to the window (which is the appropriate way to handle scroll events in jQuery).
Even if this doesn't remedy everything, it should give you a decent starting point. I hope haha.
