jquery tab 기능구현

jquery-tab.zip

0.00MB

 

jquery를 통하여 tab 기능을 간단하게 구현 하였다.

 

JS

$(function ($) {
  $(".tab-content").eq(0).show(0);
  $(".tab-ul li").click(function () {
    var idx = $(this).index();
    $(".tab-content").hide();
    $(".tab-content").eq(idx).show();
    $(".tab-ul li").removeClass("active");
    $(this).addClass("active");
  });
});

 

HTML

<ul class="tab-ul">
   <li class="active">tab 1</li>
   <li>tab 2</li>
   <li>tab 3</li>
   <li>tab 4</li>
</ul>
<div class="tab-content">
   content1
</div>
<div class="tab-content">
   content2
</div>
<div class="tab-content">
   content3
</div>
<div class="tab-content">
   content4
</div>

 

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@200,400&display=swap");

* {
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	margin: 0;
}

.tab-content {
	display: none;
}

ul {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

li {
	float: left;
	width: 25%;
	text-align: center;
	list-style: none;
	padding: 25px 0;
	cursor: pointer;
}

li.active {
	background-color: red;
	color: #fff;
}

.tab-content {
	border-top:1px solid #333;
	padding-top:15px;
	text-align: center;
	font-size: 3rem;
}

 

결과물