[Jquery] 탭메뉴 만들기

CSS 부분

<style>
		ul.tabs{
		  margin: 0px;
		  padding: 0px;
		  list-style: none;
		}
		ul.tabs li{
		  background: none;
		  color: #222;
		  display: inline-block;
		  padding: 10px 25px;
		  cursor: pointer;
		}

		ul.tabs li.current{
		  background: #ededed;
		  color: #222;
		}

		.tab-content{
		  display: none;  
		  padding: 15px 0;
		  border-top:3px solid #eee;
		}

		.tab-content.current{
		  display: inherit;
		}
	  
	
    </style>

 

HTML 태그 부분

<div class="container">
 
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">공지 메뉴</li>
    <li class="tab-link" data-tab="tab-2">딸기 메뉴</li>
    <li class="tab-link" data-tab="tab-3">구찌 메뉴</li>
  </ul>
 
	<div id="tab-1" class="tab-content current">
	공지 메뉴의 내용이 들어갑니다
	</div>

	<div id="tab-2" class="tab-content">
	딸기 메뉴의 내용이 들어갑니다
	</div>

	<div id="tab-3" class="tab-content">
	구찌 메뉴의 내용이 들어갑니다
	</div>

</div>

Jquery 부분

$(document).ready(function() {
		 $('ul.tabs li').click(function(){
			var tab_id = $(this).attr('data-tab');
		 
			$('ul.tabs li').removeClass('current');
			$('.tab-content').removeClass('current');
		 
			$(this).addClass('current');
			$("#"+tab_id).addClass('current');
		  })
 
});

 

위 방식이 좀 많은? 듯 다 복붙 하다 보니 어디가나 저소스를 보는 일이 흔하게 있다.

참조 : https://dailyscript.tistory.com/3