2

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

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

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

提前感谢您的帮助。这是有问题的代码：

http://jsfiddle.net/vCP4K/

我目前笨拙的解决方案：

// 使主页按钮在页面加载时处于活动状态

$('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 在向上或单击时击中航路点

$('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}); 

});
4

1 回答 1

0 
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');
}
于 2013-06-09T01:38:20.753 回答