4줄만에 끝..
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> 링크에 대해</title>
<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="css/styles_tab.css"/>
<script src="../lib/jquery-1.9.1.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery1.js"></script>
</head>
<body>
<div id="container">
<div id="title">
<h2> 링크를 이용하여 탭을 만든다 </h2>
</div>
<div id="content">
<h1> 최고의 휴양지 </h1>
<p> 죽기전에 가장 가고픈 곳을 선택하세요 </p>
<ul id="tabs">
<li><a href="#caribe"> 카리브의 해안 </a></li>
<li><a href="#tibet"> 신성한 종교를 느끼는 티벳 </a></li>
<li><a href="#machupicchu"> 태양의 신을 받드는 마추피추</a></li>
<li><a href="#antarctic"> 시원한 남극 </a></li>
<li><a href="#teaload"> 인생을 배우는 길 차마고도 </a></li>
</ul>
<div id="caribe" class="tab-section">
<h2> 카리브의 해안 </h2>
<p> 그림 엽서에 나올 법한 바다를 보며 야자수 아래 누워 . . .</p>
</div>
<div id="tibet" class="tab-section">
<h2>신성한 종교를 느끼는 티벳</h2>
<p> 내 종교가 아니라도 절하고 싶은</p>
</div>
<div id="machupicchu" class="tab-section">
<h2>태양의 신을 받드는 마추피추</h2>
<p> 신성한 제국을 짓밟은 무식한 스페인에 대해 탄식하며 </p>
</div>
<div id="antarctic" class="tab-section">
<h2>시원한 남극</h2>
<p> 옷 단디 입고 산책하기</p>
</div>
<div id="teaload" class="tab-section">
<h2> 인생을 배우는 길 차마고도</h2>
<p> 많은 인생의 짐을 내려놓지 않고는 걷을 수 없는 길</p>
</div>
</div>
</div>
</body>
</html>
$(function() {
$(document).ready(function() {
$( '#content' ).tabs();
});
});
'it > jQuery' 카테고리의 다른 글
| 글자 추가하고 터치하면 색변화, 그후 글추가하면 하위<li> 로 (0) | 2014.08.21 |
|---|---|
| jquery tabs 긴거 (0) | 2014.08.21 |
| 마우스오버 됫을때 그림이 바껴 신기신기 (0) | 2014.08.21 |
| 새창링크 (0) | 2014.08.21 |
| 뭔가 되긴 되는거 같은데 (0) | 2014.08.21 |
