<script>
$(document).ready(function() {
// 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
tabMenu("#tabMenu1 li");
});
function tabMenu(selector) {
// 선택 한 탭메뉴를 저장할 변수
var $selectMenuItem = null; //1번
// 메뉴 항목에 클릭 이벤트 등록
$(selector).click(function() {
// 기존 선택 메뉴 항목이 있으면 비 선택 상태로 만들기
if ($selectMenuItem) { //2번
$selectMenuItem.removeClass("select");
}
// 클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
$selectMenuItem = $(this);
// 선택 상태로 만들기
$selectMenuItem.addClass("select");
})
}
</script>
<p>첫 번째 탭메뉴</p>
<ul class="tab-menu" id="tabMenu1">
<li class="menuitem1">google</li>
<li class="menuitem2">facebook</li>
<li class="menuitem3">pinterest</li>
<li class="menuitem4">twitter</li>
<li class="menuitem5">airbnb</li>
<li class="menuitem6">path</li>
</ul>
대략 이렇습니다.
제가 생각해낸 것을 적어봅니다.
확인을 좀 해주세요..
즉,
1번 주석을 보시면
var $selectMenuItem에는 null; 이라고 들어 있습니다.
false일수도 있고, 아직 아무런 객체라든지,,그런 것이 없는 텅빈 변수라고 칩니다.
우선, 페이지를 브라우저로 열면
초기에는
탭에는 아무런 선택이 되어 있지 않는 상태입니다.
일단, 전역변수에 null 이라고 false가 선언된 듯합니다 .
그러면 false가 if 문에 선언되면
if($selectMenuItem){
$selectMenuItem.removeClass("select");
}위 구문은 실행하지 않고 통과하게 됩니다.
그리고 바로 아래,,
그리고, 6개의 li 중에서 1번째 li를 클릭하게 되면,
$selectMenuItem에 클릭한 1번째 li 즉, 1번째 li 를 가리키는
$(this)를 넣게 됩니다.
(이때, 이순간,,,$selectMenuItem은 1번째 객체(노드?)가 들어있는 상태이기 때문에
null 이라고 할 수 없는 상태가 된 것입니다...)
그러면 null 이 아니기 때문에 true가 된 것입니다.
따라서, 2번째 클릭(다른 li)를 크릭하게 되면,,
if($selectMenuItem){ // 이때는 $selectMenuItem은 1번째 li($this)를 담고 있고, 또한 null이 아니까, true상태이니,,,바로 아래의 구문이 실행이 가능하게 됩니다.
$selectMenuItem.removeClass("select");
} // 이때의 $selectMenuItem 은 1번째 $(this)를 담고 있는 것이니,,클래스를 지워주게 되고,,
다음 구문은,,
$selectMenuItem = $(this); // 여기에서 $selectMenuItem은 2번째 클릭한 li,..$(this) 를 담게 됩니다......
$selectMenuItem.addClass("select");
이렇게 이해가 되어집니다...-.=;;;;
이해가 됐으면 됐다지만,,
혹, 제가 맞으면서도 뭔가 이상하게 잘못 이해를 하고 있는건지 아닌지,,
혹, 미처 생각을 못하고 있는 것이 있기라도 한지...
선생님의 생각은 어떠하신지,,,조금이라도
답변을 해주시면 감사드립니다. ^..=;;
네, 이해하시는 개념이 정확하게 맞습니다.
일전에 답변 드렸던대로 변수 값이 null이면 false로 취급됩니다.
따라서 null인 경우 false로 취급되어 if문이 실행되지 않다가 중간에 값이 할당되면서 true로 취급되는 것입니다.