탭 메뉴 만들기 (CSS, javascript)

html

<div class="container">
	<!-- 탭 메뉴 -->
	<ul class="tabs">
		<li class="tab1" data-tab="tab-1">메뉴1</li>
		<li class="tab2" data-tab="tab-2">메뉴2</li>
	</ul>
	<!--// 탭 메뉴 -->

	<!-- 탭 내용 -->
	<div id="tab-1" class="tab_cont active">
		<div>메뉴1에 대한 탭 내용입니다.</div>
	</div>
	<div id="tab-2" class="tab_cont active">
		<div>메뉴2에 대한 탭 내용입니다.</div>
	</div>
	<!--// 탭 내용 -->
</div>

 

CSS

ul.tabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
ul.tabs li {
    display: inline-block;
    margin-right: 1px;
    padding: 10px;
    color: #2a98de;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    text-align: center;
    cursor: pointer;
}

ul.tabs li.active {
    display: inherit;
    color: #fff;
    background-color: #2a98de;
}

ul.tabs li .tab_cont {
    display: none;
}

 

javascript

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('active');
		$('.tab_cont').removeClass('active');

		$(this).addClass('active');
		$("#"+tab_id).addClass('active');
	})

});