|
1
|
<!doctype html>
|
|
2
|
<html lang="ko">
|
|
3
|
<head>
|
|
4
|
<title>서울, 어디까지 가봤니?</title>
|
|
5
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
6
|
<meta http-equiv="Cache-Control" content="no-cache" />
|
|
7
|
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
|
|
8
|
<style>
|
|
9
|
a, img {border:none;margin:0;padding: 0;}
|
|
10
|
|
|
11
|
.area_btn {text-align: center; padding-top: 12%; padding-bottom: 3%;}
|
|
12
|
.area_btn a {display: inline-block; width: 46%; cursor:pointer; margin-bottom:4px;}
|
|
13
|
|
|
14
|
|
|
15
|
.hotel_info {
|
|
16
|
width: ;
|
|
17
|
margin: 0 auto;
|
|
18
|
padding-top:3%;
|
|
19
|
text-align: center; }
|
|
20
|
|
|
21
|
/* 탭 스타일 */
|
|
22
|
.hotel_info .tab_item {
|
|
23
|
width: 16%;
|
|
24
|
height: auto;
|
|
25
|
display: inline-block;
|
|
26
|
float: left;
|
|
27
|
transition: all 0.1s ease;
|
|
28
|
}
|
|
29
|
.hotel_info .tab_item:hover {
|
|
30
|
cursor: pointer;
|
|
31
|
}
|
|
32
|
|
|
33
|
.hotel_info .tab_item span {
|
|
34
|
display: block;
|
|
35
|
}
|
|
36
|
|
|
37
|
/* 라디오 버튼 UI삭제*/
|
|
38
|
.hotel_info input[name="tab_item"] {
|
|
39
|
display: none;
|
|
40
|
}
|
|
41
|
|
|
42
|
/* 탭 컨텐츠 스타일 */
|
|
43
|
.hotel_info .tab_content {
|
|
44
|
display: none;
|
|
45
|
position: relative;
|
|
46
|
padding-top: 2%;
|
|
47
|
clear: both;
|
|
48
|
overflow: hidden;
|
|
49
|
}
|
|
50
|
|
|
51
|
/* 선택 된 탭 콘텐츠를 표시 */
|
|
52
|
a.btn1:onclick ~ #city1_content {
|
|
53
|
display: block;
|
|
54
|
}
|
|
55
|
|
|
56
|
|
|
57
|
/* 선택된 탭 스타일 */
|
|
58
|
.hotel_info .tab_item .t1 {
|
|
59
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area1.png') 0 0 no-repeat;
|
|
60
|
background-size: 99% auto;
|
|
61
|
}
|
|
62
|
|
|
63
|
.hotel_info .tab_item .t2 {
|
|
64
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area2.png') 0 0 no-repeat;
|
|
65
|
background-size: 99% auto;
|
|
66
|
}
|
|
67
|
|
|
68
|
.hotel_info .tab_item .t3 {
|
|
69
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area3.png') 0 0 no-repeat;
|
|
70
|
background-size: 99% auto;
|
|
71
|
}
|
|
72
|
|
|
73
|
.hotel_info .tab_item .t4 {
|
|
74
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area4.png') 0 0 no-repeat;
|
|
75
|
background-size: 99% auto;
|
|
76
|
}
|
|
77
|
|
|
78
|
.hotel_info .tab_item .t5 {
|
|
79
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area5.png') 0 0 no-repeat;
|
|
80
|
background-size: 99% auto;
|
|
81
|
}
|
|
82
|
|
|
83
|
.hotel_info .tab_item .t6 {
|
|
84
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area6.png') 0 0 no-repeat;
|
|
85
|
background-size: 99% auto;
|
|
86
|
}
|
|
87
|
|
|
88
|
|
|
89
|
|
|
90
|
.hotel_info input:checked + .tab_item .t1{
|
|
91
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area1_o.png') 0 0 no-repeat;
|
|
92
|
background-size: 99% auto;
|
|
93
|
}
|
|
94
|
.hotel_info input:checked + .tab_item .t2{
|
|
95
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area2_o.png') 0 0 no-repeat;
|
|
96
|
background-size: 99% auto;
|
|
97
|
}
|
|
98
|
.hotel_info input:checked + .tab_item .t3{
|
|
99
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area3_o.png') 0 0 no-repeat;
|
|
100
|
background-size: 99% auto;
|
|
101
|
}
|
|
102
|
.hotel_info input:checked + .tab_item .t4{
|
|
103
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area4_o.png') 0 0 no-repeat;
|
|
104
|
background-size: 99% auto;
|
|
105
|
}
|
|
106
|
.hotel_info input:checked + .tab_item .t5{
|
|
107
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area5_o.png') 0 0 no-repeat;
|
|
108
|
background-size: 99% auto;
|
|
109
|
}
|
|
110
|
.hotel_info input:checked + .tab_item .t6{
|
|
111
|
background:url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_area6_o.png') 0 0 no-repeat;
|
|
112
|
background-size: 99% auto;
|
|
113
|
}
|
|
114
|
</style>
|
|
115
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
116
|
<script type="text/javascript">
|
|
117
|
function fnTab(str){
|
|
118
|
$("#city"+str).prop("checked", true);
|
|
119
|
$(".tab_content").hide();
|
|
120
|
$("#city"+str+"_content").show();
|
|
121
|
|
|
122
|
aLink(".hotel_info", 0);
|
|
123
|
}
|
|
124
|
//
|
|
125
|
function aLink(target, topMargin){
|
|
126
|
jQuery("html,body").animate({ scrollTop : (jQuery(target).offset().top) + topMargin },500)
|
|
127
|
}
|
|
128
|
|
|
129
|
</script>
|
|
130
|
</head>
|
|
131
|
<body style="margin: 0; padding: 0; border: 0;">
|
|
132
|
<!-- 기획전 시작 -->
|
|
133
|
<div style="margin:0 auto;padding:0;">
|
|
134
|
|
|
135
|
<div><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_top.jpg" style="width:100%;vertical-align:top;" /></div>
|
|
136
|
<div style="background: url('https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_bg.jpg') center 0 no-repeat; background-size: 100% auto;">
|
|
137
|
<div class="area_btn">
|
|
138
|
<a id="city_btn1" href="javascript:fnTab('1');" class="btn1" title="중심가"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/btn_area1_m.png" style="width:100%;vertical-align: top;" /></a>
|
|
139
|
<a href="javascript:fnTab('2');" class="btn2" title="중부"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/btn_area2_m.png" style="width:100%;vertical-align: top;" /></a>
|
|
140
|
<a href="javascript:fnTab('3');" class="btn3" title="서북부"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/btn_area3_m.png" style="width:100%;vertical-align: top;" /></a>
|
|
141
|
<a href="javascript:fnTab('4');" class="btn4" title="동북부"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/btn_area4_m.png" style="width:100%;vertical-align: top;" /></a>
|
|
142
|
<a href="javascript:fnTab('5');" class="btn5" title="여의도"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/btn_area5_m.png" style="width:100%;vertical-align: top;" /></a>
|
|
143
|
<a href="javascript:fnTab('6');" class="btn6" title="동남부"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/btn_area6_m.png" style="width:100%;vertical-align: top;" /></a>
|
|
144
|
</div>
|
|
145
|
</div>
|
|
146
|
|
|
147
|
<div id="contents" class="city_wrap">
|
|
148
|
<div class="hotel_info">
|
|
149
|
<input id="city1" type="radio" name="tab_item" onclick="fnTab('1');" checked>
|
|
150
|
<label class="tab_item" for="city1" style="margin-left: 2%;"><span class="t1"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_blank.png" style="width: 100%;vertical-align: top;" /></span></label>
|
|
151
|
|
|
152
|
<input id="city2" type="radio" name="tab_item" onclick="fnTab('2');" >
|
|
153
|
<label class="tab_item" for="city2"><span class="t2"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_blank.png" style="width: 100%;vertical-align: top;" /></span></label>
|
|
154
|
|
|
155
|
<input id="city3" type="radio" name="tab_item" onclick="fnTab('3');" >
|
|
156
|
<label class="tab_item" for="city3"><span class="t3"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_blank.png" style="width: 100%;vertical-align: top;" /></span></label>
|
|
157
|
|
|
158
|
<input id="city4" type="radio" name="tab_item" onclick="fnTab('4');" >
|
|
159
|
<label class="tab_item" for="city4"><span class="t4"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_blank.png" style="width: 100%;vertical-align: top;" /></span></label>
|
|
160
|
|
|
161
|
<input id="city5" type="radio" name="tab_item" onclick="fnTab('5');" >
|
|
162
|
<label class="tab_item" for="city5"><span class="t5"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_blank.png" style="width: 100%;vertical-align: top;" /></span></label>
|
|
163
|
|
|
164
|
<input id="city6" type="radio" name="tab_item" onclick="fnTab('6');" >
|
|
165
|
<label class="tab_item" for="city6"><span class="t6"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/tabM_blank.png" style="width: 100%;vertical-align: top;" /></span></label>
|
|
166
|
|
|
167
|
|
|
168
|
<div class="tab_content" id="city1_content" style="display:block;"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_area1.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
169
|
<div class="tab_content" id="city2_content"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_area2.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
170
|
<div class="tab_content" id="city3_content"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_area3.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
171
|
<div class="tab_content" id="city4_content"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_area4.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
172
|
<div class="tab_content" id="city5_content"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_area5.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
173
|
<div class="tab_content" id="city6_content"><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_area6.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
174
|
</div>
|
|
175
|
</div>
|
|
176
|
|
|
177
|
<div><img src="https://www.ohmyhotel.com/data/share/promotion/ohmytrip/Seoul/KR/seoul_bottom.jpg" style="width:100%;vertical-align: top;" /></div>
|
|
178
|
|
|
179
|
</div>
|
|
180
|
<!--// 기획전 끝 -->
|
|
181
|
</body>
|
|
182
|
</html>
|
