[jQuery]for문을 이용한 Tab-Menu 만들기

tab-menu

[ for 문을 이용한 Tab-menu]

기능 : 메뉴를 클릭하면 메뉴의 스타일이 변경되며, 각각의 내용이 변경됩니다.

조건  : 메뉴의 갯수가 몇개가 되어도 자바스크립트 코드는 수정이 되지 않아야합니다.
다시 말하면, html 내에 있는 tabMenu의 갯수만큼 반복문을 실행시켜야한다는 것

 

 

 

1. html 마크업

     <ul class="menuWrap">
        <li class="tabMenu select">회사소개</li>
        <li class="tabMenu">CEO 인사말</li>
        <li class="tabMenu">연혁</li>
        <li class="tabMenu">오시는길</li>
        <li class="tabMenu">수상내역</li>
     </ul>

     <div class="contentWrap">
        <div class="content show">
           <p>회사소개11111</p>
        </div>
       <div class="content ">
           <p>CEO 인사말2222</p>
        </div>
        <div class="content">
           <p>연혁3333</p>
        </div>
         <div class="content">
           <p>오시는길4444</p>
        </div>
         <div class="content">
           <p>수상내역5555</p>
        </div>
	</div>

2. css 스타일 

menuWrap li {
    display: inline-block;
    width: 174px;
    height: 37px;
    line-height: 37px;
    color: #202023;
    text-align: center;
    border: solid 1px #98989e;
    opacity: 0.7;
    border-left: none;
    box-sizing: border-box;
    margin-bottom: -1px;
    margin-left: -4px;
    cursor: pointer;

}

.menuWrap li.select {
    background: #84847c;
    border: solid 1px #84847c;
    opacity: 1;
    color: #fff;
}

.content {
    display: none;
}

.content.show {
    display: block;
}

3. jQuery for문

 

- .length : .length는 선택한 요소의 개수를 반환하는 속성입니다

 html 내에 있는 tabMenu의 갯수만큼 반복문을 실행해야함 에서 tabMenu의 갯수가 조건문이 되어야 하기 때문에 tabMenu의 갯수를 알 수 있는 속성이 필요합니다.

for (let i=0; i<$('.tabMenu').length; i++){
       $('.tabMenu').eq(i).on("click",function(){
         $('.tabMenu').removeClass('select');
         $('.content').removeClass('show');
          $('.tabMenu').eq(i).addClass('select');
          $('.content').eq(i).addClass('show');
    });
  }

 

 

*** for문**** 

- let i = 0 : 초기값 

- i<3 : 조건문

-i++ : 반복문이 돌 때  마다 i 값 추가

for (let i=0; i<3; i++) {
	실행할 코드
}