항목에 클래스 변경 CSS가있는 경우

Question

그래서 순서없는 메뉴가 내 메뉴로 나타납니다. 메뉴 항목을 클릭 할 때마다 해당 메뉴 항목에 "활성"클래스가 추가되고 해당 클래스의 다른 목록 항목이 제거되도록 설정되어 있습니다. 이 부분은 잘 작동합니다. 이제, 나는 절대 위치 인 화살표를 가지고 있으며 어떤 클래스가 "활성"클래스를 가지고 있는지에 따라 단순히 "top"스타일을 변경하려고합니다. 사이트가 처음로드 될 때만 확인하므로 다른 목록 항목이 "활성"클래스가되면 게재 위치가 변경되지 않습니다. 참고 : ".active-item"은 화살표입니다. 이 위치는 클릭에서 변경 및 페이지로드뿐만 아니라되도록하려면

$(document).ready(function() { 

    $('.nav .nav-items li').click(function() { 
     $('.nav .nav-items li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 

}); 

if ($('.nav .nav-items .nav-dash').hasClass('active')) { 
    $('.nav .nav-items .active-item').css('top', '30px'); 
}; 

if ($('.nav .nav-items .nav-sales').hasClass('active')) { 
    $('.nav .nav-items .active-item').css('top', '90px'); 
}; etc... 

Answer 1

당신은 메뉴 항목 클릭 이벤트의 클릭() 핸들러의 화살표 위치 코드를 배치해야합니다.

Answer 2

나는 당신의 스타일 시트에서 그것을 할 경향이있다. 그것도 빠르지 않을 겁니다 :

.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 */ 

이렇게하면 필요한만큼 코드를 추가 할 필요가 없습니다.

하지만 정말 자바 스크립트에서 할 필요가 있다면 이것은 당신이 원하는 일을해야합니다

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

곰을 염두에두고, 난 정말 그것을 테스트 할 수 없습니다. 샘플 마크 업을 사용했다면 쉽게 테스트 할 수 있습니다. 거기에 구문 오류가있을 가능성이 있음을 알고 있습니다. 그러나 당신은 아이디어를 얻습니다.