js+jq-2

by qwerew0

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="tab">
	<ul class="tab_menu">
		<li>공지사항</li>
		<li>알림마당</li>
		<li>보도자료</li>
		<li>채용정보</li>
	</ul>
	<div class="tab_list">
		<ul>
			<li>공지사항입니다.</li>
			<li>공지사항입니다.</li>
			<li>공지사항입니다.</li>
			<li>공지사항입니다.</li>
		</ul>
		<ul>
			<li>알림마당입니다.</li>
			<li>알림마당입니다.</li>
			<li>알림마당입니다.</li>
			<li>알림마당입니다.</li>
		</ul>
		<ul>
			<li>보도자료입니다.</li>
			<li>보도자료입니다.</li>
			<li>보도자료입니다.</li>
			<li>보도자료입니다.</li>
		</ul>
		<ul>
			<li>채용정보입니다.</li>
			<li>채용정보입니다.</li>
			<li>채용정보입니다.</li>
			<li>채용정보입니다.</li>
		</ul>
		
	
	</div>

CSS

* {
	margin: 0;
	padding: 0;
}

.tab {
	width: 280px;
	height: 160px;
	border: 1px solid #333;
}

.tab_menu {
	height: 40px;
	line-height: 40px;
	list-style: none;
}

.tab_menu li {
	float: left;
	width: 70px;
	text-align: center;
}

.tab_menu li.on {
	background-color: red;
	font-weight: bold;
	color: #fff;
}

.tab_list {
	position: relative;
}

.tab_list ul {
	position: absolute;
	display: none;
}

.tab_list ul.on {
	display: block;
}

JavaScript

var tabBtn = document.querySelectorAll('.tab_menu li');
var tabPanel = document.querySelectorAll('.tab_list ul');
var tabFn = function (i) {
	tabBtn[i].addEventListener('click', function () {
		for (var k = 0; k < tabBtn.length; k++) {
			tabBtn[k].classList.remove('on');
			tabPanel[k].classList.remove('on');
		}
		tabBtn[i].classList.add('on');
		tabPanel[i].classList.add('on');
	});
};
for (var i = 0; i < tabBtn.length; i++) {
	tabFn(i);
}