참고사이트
호텔농심
https://www.hotelnongshim.com/kr/?ref=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8%3D
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
*{box-sizing: border-box;}
.wrap{height: 540px;margin: auto; display: flex;}
ul.time{width: 220px; height: 100%; font-size: 30px;}
ul.time li{cursor:pointer;}
ul.time li.on{color:red;}
ul.content{width: 630px; height: 100%; position: relative;}
ul.content li{position: absolute; display:none;}
ul.content li.on{display: block;}
ul.title{width: 350px; height: 100%; position: relative;}
ul.title li{position: absolute; height: 100%; display: none;}
ul.title li.on{display: block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('.time li').click(function(){
var idx = $(this).index();
//alert(idx)
$('.time li').removeClass('on');
$(this).addClass('on');
$('.content li').fadeOut();
$('.content li').eq(idx).fadeIn();
$('.title li').fadeOut();
$('.title li').eq(idx).fadeIn();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul class="time">
<li class="on">08:00</li>
<li>10:00</li>
<li>12:00</li>
<li>14:00</li>
<li>16:00</li>
<li>18:00</li>
<li>20:00</li>
</ul>
<ul class="content">
<li class="on"><img src="img/time_img01.jpg" alt=""/></li>
<li><img src="img/time_img02.jpg" alt=""/></li>
<li><img src="img/time_img03.jpg" alt=""/></li>
<li><img src="img/time_img04.jpg" alt=""/></li>
<li><img src="img/time_img05.jpg" alt=""/></li>
<li><img src="img/time_img06.jpg" alt=""/></li>
<li><img src="img/time_img07.jpg" alt=""/></li>
</ul>
<ul class="title">
<li class="on"><h2>아름다운 예술작품과 같은 허심청</h2></li>
<li><h2>안락한 객실에서 즐기는 여유</h2></li>
<li><h2>고즈넉한 내당에서 한끼 식사</h2></li>
<li><h2>드넓은 창으로 쏟아지는 햇살 가득한 라운지</h2></li>
<li><h2>활기찬 에너지를 되찾는 휘트니스 센터</h2></li>
<li><h2>가장 아름다운 레스토랑</h2></li>
<li><h2>라이브로 즐기는 더 바</h2></li>
</ul>
</div>
</body>
</html>
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| 제이쿼리 애니메이션: callback을 이용해서 움직이는 선 박스 만들기 (0) | 2019.09.26 |
|---|---|
| position:relative 사용시 화면의 가운데 맞추기 (0) | 2019.09.26 |
| 0926 첫수업 (0) | 2019.09.26 |
| 마우스올리면 이미자가 변경되게 하기 (0) | 2019.09.24 |
| 190924 두번째 수업 (0) | 2019.09.24 |