Question

请原谅JS noob问题，但是（虽然我的代码按预期工作）我确信必须有更好/更有效的方法来编写它。建议非常感谢。

以下是发生的事情：我在一页垂直滚动主题（自定义）上有一个Wordpress菜单。当页面向上，向下或单击导航项时，我正在使用waypoints.js突出显示当前可见部分的相应导航按钮。

我在页面加载时将主导航项设置为“活动”类，并通过在每个路点添加/删除“活动”类来手动突出显示每个部分。为了自动化这一点，我尝试使用$ this而不是div id，但还未能正确使用它。

提前感谢您的帮助。 以下是相关代码：

我目前笨拙的解决方案：

//在页面加载时激活主页按钮

$('li.home-btn a').addClass('active');

//更改类，因为div在DOWN或点击

的路上点击了航点

$('section#home').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.home-btn a').addClass('active');
}, {offset: -1}); 

$('section#services').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.services-btn a').addClass('active');
}, {offset: 1}); 

$('section#work').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.work-btn a').addClass('active');
}, {offset: 1}); 

$('section#about').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.about-btn a').addClass('active');
}, {offset: 1}); 

$('section#blog').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.blog-btn a').addClass('active');
}, {offset: 1}); 

$('section#contact').waypoint(function(down) {
$('.nav li a').removeClass('active');
$('li.contact-btn a').addClass('active');
}, {offset: 1});

//更改类，因为div在UP或点击的路上点击了航路点

$('section#home').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.home-btn a').addClass('active');
}, {offset: -1}); 

$('section#services').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.services-btn a').addClass('active');
}, {offset: -1}); 

$('section#work').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.work-btn a').addClass('active');
}, {offset: -1}); 

$('section#about').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.about-btn a').addClass('active');
}, {offset: -1}); 

$('section#blog').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.blog-btn a').addClass('active');
}, {offset: -1}); 

$('section#contact').waypoint(function(up) {
$('.nav li a').removeClass('active');
$('li.contact-btn a').addClass('active');
}, {offset: -1}); 

});

Answer 1

var sections = [];

// It'd be better if you used a classname for the section.
// Then you can select by classname rather than element name.
// E.g., if someone were to add a <section> tag elsewhere in the document,
// they would experience a bad bug.

$('section').each(function() {
  sections.push($(this).attr('id'));
});
$.each(sections, function(index) {
  var sectionDiv = $('#' + sections[index]);
  sectionDiv.waypoint(function(down) {
    activateSection(sections[index]);
  }, {offset: -1});
  sectionDiv.waypoint(function(up) {
    activateSection(sections[index]);
  }, {offset: -1});
})
function activateSection(sectionName) {  
    $('.nav li a').removeClass('active');
    $('li.' + sectionName + '-btn a').addClass('active');
}

更有效的方式来编写这个Javascript（航点）？

1 个答案: