jquery 네비게이션 버튼 클릭 이벤트 제어하기

<jquery 클릭 이벤트 제어 하기>

아주 쉬운 초보자 개념에서 만들어 보았습니다.

대게 클릭 이벤트 사용할때 $('#id').click(function(){ }); 이렇게 많이들 쓸텐데 

바인딩 문제로 스택쌓이거나 할수도 있습니다.

그러니 언바인드도 중요합니다. 대게 append 혹 해당 클릭 이벤트가 여기저기 한곳에서 

여럿쓰인다면 ( document ready 상태에서)

off('click').on('click',function(){}); 방식도 좋습니다

초보자 개념에서 예제를 만들어봣습니다

대충 ul > li 를 이용해 끄적거리기..

아래처럼 네비게이션 메뉴바라 생각해보고 만들어보았습니다

마우스 오버했을때 css 스타일적용되도록 해놓고

클릭했을때 active 클래스를 삽입하여 고정되도록 해봤습니다

대게 페이지 이동없이 메뉴 클릭 이벤트가 일어날때 필요할듯하네요..

우선 샘플 html 작성해주시고~

스타일도 생각나는데로 붙여봤습니다.....공대감성;;

마우스 오버 스타일도 붙여보고

클릭이벤트 제어입니다.

우선 hasClass로 this에 해당 클래스가 있는지 체크해주고

있다면 remove 시켜서 active 클래스를 제거해주고

없다면 전체 a 태그 (다른곳에 active 되어있을수도있으니)

클래스 클리어 해주시고 this에 addClass 해주시면 되겠습니다.

부트스트랩2로 하다가 3로 바꾸고나니 좀 햇갈리는게 있는데

css는 역시 어렵네요

앞으로 개발하면서 그리드, draggable, resizable, 이미지 scale 등

생각나는데로 끄적여보겠습니다.