| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 아이폰 배경화면
- 안드로이드 개발 2.0
- 인기있는 블로그 만들기
- MapView
- 구글안드로이드
- 아이폰 바탕화면
- 안드로이드 2.0 개발
- 안드로이드 개발 강좌
- objective-c
- SKY 시리우스
- 안드로이드 개발 2.0 강좌
- 구글 안드로이드 개발
- 안드로이드2.0
- 구글 안드로이드
- 안드로이드 개발
- 영어
- 안드로이드개발
- 스카이 안드로이드폰 시리우스
- 안드로이드
- 안드로이드2.0개발
- 안드로이드 바탕화면
- 안드로이드 배경화면
- 스카이 안드로이드폰 시리우스 K양 동영상
- sky 시리우스폰
- Form Stuff
- 하루한마디영어
- 하루 한마디 영어
- 안드로이드폰
- 스마트폰 배경화면
- android
- Today
- Total
moozi
tab 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab</title>
<style type="text/css">
ul.tab {
list-style-type: none; /* 기호 없애기 */
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
ul.tab li {float: left;}
ul.tab li a {
display: inline-block; /* 가로방향으로 블럭설정 */
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.tab li a:hover {background-color: #ddd;}
ul.tab li a:focus, .active {background-color: #ccc;}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s; /* 1초동안 fadeEffect 실행 */
}
.tab1{
display: block;
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
<script type="text/javascript">
function init(){
// 아이디 London을 찾아서 보이게.
document.getElementById("London").style.display = "block";
// tablinks 클래스로 찾아서 첫번째에 active클래스 적용
var tab=document.getElementsByClassName("tablinks");
tab[0].classList.add("active");
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
// tabcontent클래스가 적용된 부분을 모두 안보이게 함.
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// tablinks클래스가 적용된 부분를 찾아서 active클래스 미적용
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tabcontent.length; i++) {
tablinks[i].classList.remove("active");
}
// cityName매개변수에 저장된 id로 찾아서 보이게.
document.getElementById(cityName).style.display = "block";
//이벤트가 발생된 객체에 active클래스 적용
evt.currentTarget.classList.add("active");
}
</script>
</head>
<body onLoad="init()">
<ul class="tab">
<!-- <li><a href="#" class="tablinks active" onclick="openCity(event, 'London')">London</a></li>-->
<li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
<li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
<li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>
<!--
<div id="London" class="tabcontent .tab1">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
-->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>