One effective way to achieve this would be through your stylesheet for improved performance:
.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 */
By utilizing CSS, you can reduce the amount of code required significantly.
In cases where it is absolutely necessary to implement this in JavaScript, the following approach should fulfill your requirements:
$(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();
});
On closer inspection, your current code may not be achieving the desired result as intended. Specifically, you are clearing and setting styles for all active-item nodes instead of individual ones. While CSS is preferable for such tasks, below is a modified JavaScript solution that may help:
$(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();
});
For testing purposes, having access to example markup would facilitate the process. Please note that there might be some syntax errors present. However, the concept remains unchanged.