이미지 처럼요..
1메뉴를 클릭하면 그것에 대한 내용이 나오고..
2메뉴를 클릭하면 내용이 나오게 하는 프로그램 가르켜 주세요..
div를 이용하여 하는거 같은데..
자바스크립트에서 어떻게 해야하는지.. 모르겟어요..ㅠ.ㅠ
1메뉴를 클릭하면 그것에 대한 내용이 나오고..
2메뉴를 클릭하면 내용이 나오게 하는 프로그램 가르켜 주세요..
div를 이용하여 하는거 같은데..
자바스크립트에서 어떻게 해야하는지.. 모르겟어요..ㅠ.ㅠ
첨부파일
댓글 2개
17년 전
<html>
<head>
<title>div Tab menu</title>
</head>
<body>
<script language="JavaScript">
function tabmenu(i) {
if(i==1) {
document.getElementById("tab01").style.display = 'block';
document.getElementById("tab02").style.display = 'none';
document.getElementById("tab03").style.display = 'none';
}
else if(i==2) {
document.getElementById("tab01").style.display = 'none';
document.getElementById("tab02").style.display = 'block';
document.getElementById("tab03").style.display = 'none';
}
else if(i==3) {
document.getElementById("tab01").style.display = 'none';
document.getElementById("tab02").style.display = 'none';
document.getElementById("tab03").style.display = 'block';
}
}
</script>
<div style="width:1000px;">
<div style="folat:right; text-align:right;">
<a href="javascript:tabmenu(1);">메뉴 1</a>
<a href="javascript:tabmenu(2);">메뉴 2</a>
<a href="javascript:tabmenu(3);">메뉴 3</a>
</div>
<p />
<div id="tab01" style="display:block; border:1px solid black; height:50px;">
메뉴 1의 게시물
</div>
<div id="tab02" style="display:none; border:1px solid black; height:50px;">
메뉴 2의 게시물
</div>
<div id="tab03" style="display:none; border:1px solid black; height:50px;">
메뉴 3의 게시물
</div>
</div>
</body>
</html>
이렇게 하면 되는지 모르겠습니다.
일단 메뉴3번까지만 해 보았습니다..^^
<head>
<title>div Tab menu</title>
</head>
<body>
<script language="JavaScript">
function tabmenu(i) {
if(i==1) {
document.getElementById("tab01").style.display = 'block';
document.getElementById("tab02").style.display = 'none';
document.getElementById("tab03").style.display = 'none';
}
else if(i==2) {
document.getElementById("tab01").style.display = 'none';
document.getElementById("tab02").style.display = 'block';
document.getElementById("tab03").style.display = 'none';
}
else if(i==3) {
document.getElementById("tab01").style.display = 'none';
document.getElementById("tab02").style.display = 'none';
document.getElementById("tab03").style.display = 'block';
}
}
</script>
<div style="width:1000px;">
<div style="folat:right; text-align:right;">
<a href="javascript:tabmenu(1);">메뉴 1</a>
<a href="javascript:tabmenu(2);">메뉴 2</a>
<a href="javascript:tabmenu(3);">메뉴 3</a>
</div>
<p />
<div id="tab01" style="display:block; border:1px solid black; height:50px;">
메뉴 1의 게시물
</div>
<div id="tab02" style="display:none; border:1px solid black; height:50px;">
메뉴 2의 게시물
</div>
<div id="tab03" style="display:none; border:1px solid black; height:50px;">
메뉴 3의 게시물
</div>
</div>
</body>
</html>
이렇게 하면 되는지 모르겠습니다.
일단 메뉴3번까지만 해 보았습니다..^^
17년 전
와우~~ 고마워요~~~ 몇일 끙끙댓었는뎅.. 고맙습니다
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 330 |
prosper
|
20년 전 | 2249 | |
| 329 |
prosper
|
20년 전 | 1861 | |
| 328 |
prosper
|
20년 전 | 1674 | |
| 327 | 20년 전 | 3751 | ||
| 326 | 20년 전 | 4829 | ||
| 325 |
hwatta
|
20년 전 | 2459 | |
| 324 |
 hanpedro |
20년 전 | 3127 | |
| 323 | 20년 전 | 5837 | ||
| 322 |
hwatta
|
20년 전 | 2825 | |
| 321 |
hwatta
|
20년 전 | 2302 | |
| 320 |
yesmoa
|
20년 전 | 4560 | |
| 319 | 20년 전 | 2664 | ||
| 318 | 20년 전 | 2229 | ||
| 317 |
kyodon
|
20년 전 | 2754 | |
| 316 | 20년 전 | 2561 | ||
| 315 |
hanpedro |
20년 전 | 2870 | |
| 314 |
hanpedro |
20년 전 | 3322 | |
| 313 |
 damoa.biz |
20년 전 | 2627 | |
| 312 |
yesmoa
|
20년 전 | 4701 | |
| 311 | 20년 전 | 3252 | ||
| 310 |
홀로남은자
|
20년 전 | 4545 | |
| 309 | 20년 전 | 3000 | ||
| 308 | 20년 전 | 4114 | ||
| 307 | 20년 전 | 4346 | ||
| 306 | 20년 전 | 7019 | ||
| 305 | 20년 전 | 3859 | ||
| 304 | 20년 전 | 2750 | ||
| 303 |
크리스탈처럼
|
20년 전 | 4384 | |
| 302 | 20년 전 | 2196 | ||
| 301 |
 수다쟁이오도리씨 |
20년 전 | 4313 | |
| 300 | 20년 전 | 3780 | ||
| 299 | 20년 전 | 2588 | ||
| 298 | 20년 전 | 4813 | ||
| 297 |
 bbking |
20년 전 | 2517 | |
| 296 | 20년 전 | 4512 | ||
| 295 | 20년 전 | 3557 | ||
| 294 | 20년 전 | 3582 | ||
| 293 | 20년 전 | 3806 | ||
| 292 | 20년 전 | 3196 | ||
| 291 |
yesmoa
|
20년 전 | 5922 | |
| 290 | 20년 전 | 2931 | ||
| 289 | 20년 전 | 5833 | ||
| 288 |
bbking |
20년 전 | 2364 | |
| 287 |
bbking |
20년 전 | 1778 | |
| 286 |
bbking |
20년 전 | 2133 | |
| 285 |
bbking |
20년 전 | 3527 | |
| 284 |
bbking |
20년 전 | 2026 | |
| 283 |
bbking |
20년 전 | 4395 | |
| 282 | 20년 전 | 3378 | ||
| 281 |
bbking |
20년 전 | 2197 | |
| 280 |
bbking |
20년 전 | 7791 | |
| 279 | 20년 전 | 5535 | ||
| 278 | 20년 전 | 2980 | ||
| 277 |
hanpedro |
20년 전 | 5562 | |
| 276 | 20년 전 | 2350 | ||
| 275 | 20년 전 | 2593 | ||
| 274 | 20년 전 | 2367 | ||
| 273 | 20년 전 | 2206 | ||
| 272 | 20년 전 | 2133 | ||
| 271 | 20년 전 | 2594 | ||
| 270 | 20년 전 | 2606 | ||
| 269 | 20년 전 | 2471 | ||
| 268 | 20년 전 | 2667 | ||
| 267 | 20년 전 | 2352 | ||
| 266 | 20년 전 | 2557 | ||
| 265 | 20년 전 | 3490 | ||
| 264 |
bbking |
20년 전 | 5345 | |
| 263 |
hanpedro |
20년 전 | 3713 | |
| 262 | 20년 전 | 3165 | ||
| 261 |
허저비
|
20년 전 | 5913 | |
| 260 |
bbking |
20년 전 | 5706 | |
| 259 | 20년 전 | 4128 | ||
| 258 | 20년 전 | 2370 | ||
| 257 | 20년 전 | 3175 | ||
| 256 | 20년 전 | 1893 | ||
| 255 | 20년 전 | 1558 | ||
| 254 | 20년 전 | 3131 | ||
| 253 | 20년 전 | 3539 | ||
| 252 | 20년 전 | 5110 | ||
| 251 | 20년 전 | 5795 | ||
| 250 | 20년 전 | 3667 | ||
| 249 | 20년 전 | 5009 | ||
| 248 | 20년 전 | 3273 | ||
| 247 | 20년 전 | 3626 | ||
| 246 |
bbking |
20년 전 | 7940 | |
| 245 |
bbking |
20년 전 | 5894 | |
| 244 | 20년 전 | 4474 | ||
| 243 |
hanpedro |
20년 전 | 4040 | |
| 242 | 20년 전 | 2769 | ||
| 241 | 20년 전 | 2710 | ||
| 240 | 20년 전 | 2351 | ||
| 239 | 20년 전 | 1648 | ||
| 238 |
아우겐나이스
|
20년 전 | 2253 | |
| 237 |
email
|
20년 전 | 3676 | |
| 236 | 20년 전 | 4139 | ||
| 235 | 20년 전 | 10456 | ||
| 234 | 20년 전 | 5055 | ||
| 233 | 20년 전 | 3358 | ||
| 232 | 20년 전 | 3191 | ||
| 231 | 20년 전 | 3827 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기