我倾向于在您的样式表中执行此操作。它会快很多:
.nav-items > .active .active-item{
top: 0px;
}
.nav-items > .active.nav-sales .active-item{
top: 30px;
}
.nav-items > .active.nav-sales .active-item{
top: 90px;
}
/* etc */
通过这种方式,您不必添加几乎与其他方式所需的代码一样多的代码。
但是如果你真的需要在 JavaScript 中做这件事,这应该做你想做的事:
$(document).ready(function() {
function checkNavItems(){
if ($('.nav .nav-items .nav-dash').hasClass('active')) {
$('.nav .nav-items .active-item').removeAttr('style');
$('.nav .nav-items .active-item').css('top', '30px');
};
if ($('.nav .nav-items .nav-sales').hasClass('active')) {
$('.nav .nav-items .active-item').removeAttr('style');
$('.nav .nav-items .active-item').css('top', '90px');
}; etc...
}
$('.nav .nav-items li').click(function () {
$('.nav .nav-items li').removeClass('active');
$(this).addClass('active');
checkNavItems();
});
checkNavItems();
});
但是,您的代码并没有按照您认为的那样做。首先,您要删除所有活动项节点的样式,然后为所有活动项节点设置顶部。我猜您正在尝试清除所有先前设置的样式并仅在此样式上设置样式。这种情况用 CSS 更容易管理,但是,这里是应该做的 JS:
$(document).ready(function() {
var activeStyles ={
'nav-dash': {
'top': '30px'
},
'nav-sales': {
'top' : '90px'
}
//ETC
}
function checkNavItems(){
var active = $('.nav .nav-items .active'),
activeItem = $('.nav .nav-items .active .active-item');
inactiveItem = $('.nav .nav-items .not(.active) .active-item');
activeItem.removeAttr('style');
for (key in activeStyles) {
if (activeStyles.hasOwnProperty(key) && active.hasClass(key)) {
activeItem.css(activeStyles[key]);
break; //Only do it once
};
};
}
$('.nav .nav-items li').click(function () {
$('.nav .nav-items li').removeClass('active');
$(this).addClass('active');
checkNavItems();
});
checkNavItems();
});
请记住,我无法真正测试它。如果您有示例标记,那么测试起来会很简单。知道我可能有一些语法错误。但你明白了。