제이쿼리로 탭메뉴, 탭버튼 만들기

1. 소스

[HTML]

  <div class="wrap">
    <!--tab 버튼-->
    <ul class="tab_btn">
      <li class="active"><a href="#tab01">
        <p>
          <span>01</span>탭 버튼
        </p>
      </a></li>
      <li><a href="#tab02">
        <p>
          <span>02</span>탭 버튼
        </p>
      </a></li>
      
      <li><a href="#tab03">
        <p>
          <span>03</span>탭 버튼
        </p>
      </a></li>
      
      <li><a href="#tab04">
        <p>
          <span>04</span>탭 버튼
        </p>
      </a></li>
    </ul>
    
    <!--tab 내용-->
    <div class="tab_container">
      <div class="content" id="tab01">
        <div>
          내용01 내용01 내용01 내용01 내용01 내용01
        </div>
      </div>
      <div class="content" id="tab02">
        <div>
          내용02 내용02 내용02 내용02 내용02 내용02
        </div>
      </div>
      <div class="content" id="tab03">
        <div>
          내용03 내용03 내용03 내용03 내용03 내용03
        </div>
      </div>
      <div class="content" id="tab04">
        <div>
          내용04 내용04 내용04 내용04 내용04 내용04
        </div>
      </div>
    </div>
  </div>

 

[CSS]

<style>
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box; /*font-weight:600;*/}
li {list-style: none;}
img {border: 0; outline: 0}
a {text-decoration: none; color:#333;}
button, fieldset, input{border: 0; outline: 0; background: none;}
button {cursor: pointer;}
table {border-collapse: collapse; border-spacing: 0}
caption, legend {font-size: 0; color:transparent; text-indent: -9999px; overflow: hidden;}
body,html{height: 100%;}

/*탭메뉴 디자인*/
.wrap{width: 810px; height: 260px; margin:50px auto; background: #d6d6d6}
.tab_btn{font-size: 0}
.tab_btn > li{display: inline-block; width: 200px; height: 70px;background: #f6f6f6; line-height: 70px; text-align: center; margin-right: 3.2px}
.tab_btn > li:last-child{margin-right: 0}
.tab_btn p{font-size: 17px; font-weight: bold; color: #333}
.tab_btn span{font-size: 20px; font-weight:800; color: #333; display: inline-block; padding-right: 5px}

/*내용*/
.tab_container{width: 100%; height: 190px;overflow: hidden;}
.tab_container > div{width: 100%; height: 190px; background:#007165; padding: 38px; color: #fff;}

/*tab버튼 클릭했을 때*/
.tab_btn > li.active{background: #007165; position: relative;}
.tab_btn > li.active p{font-size: 17px; font-weight: bold; color: #f3f3f3}
.tab_btn > li.active span{color: #FFFADE}
.tab_btn > li.active a:before{content: ''; width: 7px; height: 7px; background: #FFFADE; display: inline-block; position: absolute;border-radius: 50%; bottom:3px;}
</style>

 

[JS]

<script>
$(document).ready(function(){
	$('.tab_btn li').click(function(){
		var value = $(this).find('a').attr('href');
		$('.tab_container .content').hide();
		$('.tab_container').find(value).show();
		$(this).addClass('active').siblings().removeClass('active')
		return false;
	});
});
</script>

 

2. 결과 화면 

See the Pen Untitled by H__jung (@honghongbyul) on CodePen.

 

3. 제이쿼리 문법 정리 

• .attr() : 선택한 요소의 속성값을 가져온다. 
• .find() : 특정 요소를 찾는다.
• .addClass() : 선택한 요소에 클래스 값을 추가한다. 
• .removeClass() : 선택한 요소에서 클래스 값을 제거한다. 
• .siblings() : 선택한 요소를 제외한 형제 요소를 찾는다.