<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<p>탭 메뉴를 선택해 보세요</p>
<div class="tab">
<button class="tablinks">런던</button>
<button class="tablinks">파리</button>
<button class="tablinks">앙카라</button>
</div>
<div id="London" class="tabcontent">
<h3>런던</h3>
<p>런던 (영어: London)은 잉글랜드와 영국의 수도이다.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>파리</h3>
<p>파리(Paris)는 프랑스의 수도이다.</p>
</div>
<div id="ankara" class="tabcontent">
<h3>앙카라</h3>
<p>터키의 수도이다.</p>
</div>
</body>
<script>
$(".tablinks:eq(1)").addClass("active");
$("#London").css('display', 'none');
$(".tablinks").click(function(event) {
selectedIndex = $(this).index();
$(".tabcontent").each(function(index, item) {
if (index == selectedIndex) {
$(item).css('display', 'none');
} else {
$(item).css('display', 'block');
}
});
$(".tablinks").each(function(index, item) {
if (index != selectedIndex) {
$(item).addClass("active");
} else {
$(item).removeClass('active');
}
});
});
</script>
</html>
수정된 코드
양이 많아 압박받아서 그렇치 고칠곳든 2곳이였음...
'JQUERY > 예제들' 카테고리의 다른 글
| 회원가입 정규표현식 시험 예제 (0) | 2022.09.29 |
|---|---|
| chenk값 예제 : 모든항목 선택문제 (0) | 2022.08.26 |
| split("") 빈칸기준 .reverse() 정렬 .join("") 합치고; (0) | 2022.08.25 |
| 객체정보를 prompt받아 for으로 테이블에 출력되는 배열 (0) | 2022.08.25 |
| 회원가입 창만들기 (0) | 2022.08.25 |