JSFiddle - React, Tailwind, and code Playground
HTML
<!--
* UI 개발
* Tab Menu 제작
* 제작자 : 박경두
* 최종 수정일 : 2016-07-21
*
*
*
*
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>tab example</title>
<style>
#container {
width:960px;
margin:0 auto;
text-align:center;
}
.tab {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items side by side */
.tab li {
float: left;
}
/* Style the links inside the list items */
.tab li a {
display: inline-block;
color: #000;
text-align: center;
text-decoration: none;
padding: 14px 16px;
font-size: 17px;
transition:0.3s;
}
/* Style the tab content */
.tabcontent {
display: none;
background-color:rgb(0,154,200);
padding: 6px 12px;
color:#fff;
}
ul.tab li.current{
background-color: rgb(0,154,200);
color: #222;
}
.tabcontent.current {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="container">
<h2>How to develop a tab menu with jQuery</h2>
<p>제작자 : 박경두</p>
<p>고려대학교 경영정보학과</p>
<p>멋쟁이 사자처럼 4기</p>
<ul class="tab">
<li class="current" data-tab="tab1"><a href="#">About</a></li>
<li data-tab="tab2"><a href="#">Portfolio</a></li>
<li data-tab="tab3"><a href="#">Contact</a></li>
<li data-tab="tab4"><a href="#">Travel</a></li>
</ul>
<div id="tab1" class="tabcontent current">
<h3>About</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of...