탭메뉴 함수로 만들기

탭메뉴 html

<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>		
<p>두 번째 탭메뉴</p>
<ul class="tab-menu" id="tabMenu2">
	<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_함수를 사용하지 않은 탭메뉴

 

	<script>
		$(document).ready(function(){
			/* 첫 번째 탭메뉴 처리 */
			var $selectMenuItem =null;
            //변수 null값 처리
            
			$("#tabMenu1 li").click(function(){
            	//#tabMenu1 li 클릭했을대
                
				if($selectMenuItem!=null){
					$selectMenuItem.removeClass("select");
				} //기존선택값이 있을경우 select클래스 지우기
                
				$selectMenuItem = $(this);
				// 변수에 선택된 값 저장
                
				$selectMenuItem.addClass("select");
                //변수에 select클래스 넣어준다.
			})

			/* 두 번째 탭메뉴 처리 */
			var $selectMenuItem2 =null;
			$("#tabMenu2 li").click(function(){
				if($selectMenuItem2!=null){
					$selectMenuItem2.removeClass("select");
				}
				$selectMenuItem2 = $(this);
				$selectMenuItem2.addClass("select");
			})
		});
	</script>

첫번째와 두번째 탭메뉴의 처리 방법은 같지만 함수를 사용하지 않을경우 중복되서 다시 코드를 넣어줘야 하고

3번째 4번재도 마찬가지로 같은 코드를 여러번 사용해야 한다.

 

step_01 중복된 코드 함수 만들기

		$(document).ready(function(){
			tabMenu();
            //tebMenu함수호출
		});

		function tabMenu(){
			//중복되는 코드 tabMenu 함수로 묶어준다.
            
			var $selectMenuItem =null;
			$("#tabMenu1 li").click(function(){
				if($selectMenuItem!=null){
				   $selectMenuItem.removeClass("select");
				}
				$selectMenuItem = $(this);
				$selectMenuItem.addClass("select");

			})
		}

재사용함수를 함수로 만들고 함수를 호출해 준다.

 

step_02 변경되는 부분과 변경되지 않는 부분 분리

#tabMenu1, #tabMenu2 에서 같이 쓰는 부분 즉 변경이 되지 않는 부분과 변경되는 부분을 구분하고 변경되는 부분은 매개변수로 만들어준다.

 

step_03 매개변수 만들기

$(document).ready(function(){
			tabMenu("#tabMenu1 li");
		});
		변경되는 값인 #tabMenu1 li를 매개변수로 tabMenu 함수를 호출해준다.
        
		function tabMenu(selector){
        	//selector로 매개변수값을 받는다.
            
			var $selectMenuItem =null;
			$(selector).click(function(){
            // 매개변수로받은 selector를 클릭하면 실행
            
				if($selectMenuItem!=null){
				   $selectMenuItem.removeClass("select");
				}

				$selectMenuItem = $(this);

				$selectMenuItem.addClass("select");
			})
		}

#tabMenu li 가 selector 매개변수로

 

step_04 2번째 탭메뉴도 실행할수있도록 호출함수를 추가해준다.

		$(document).ready(function(){
			tabMenu("#tabMenu1 li");
			tabMenu("#tabMenu2 li");
		});


		function tabMenu(selector){
			var $selectMenuItem =null;

			$(selector).click(function(){

				if($selectMenuItem!=null){
				   $selectMenuItem.removeClass("select");
				}

				$selectMenuItem = $(this);

				$selectMenuItem.addClass("select");

			})
		}