html
<ul class="tab">
<li class="on">
<a href="#">TAB 1</a>
<div>
Contents 1
</div>
</li>
<li>
<a href="#">TAB 2</a>
<div>
Contents 2
</div>
</li>
<li>
<a href="#">TAB 3</a>
<div>
Contents 3
</div>
</li>
</ul>
css
.tab {position:relative; padding-top:31px;}
.tab>li>a {
display:block;
position:absolute;
top:0;
width:95px;
height:30px;
line-height:30px;
text-align:center;
background:#eee;
color:#555;
border:1px solid #767676;
border-bottom:0;
}
.tab>li.on>a {background:#767676; color:#fff;}
.tab>li:first-child>a {left:0;}
.tab>li+li>a {left:100px;}
.tab>li+li+li>a {left:200px;}
.tab>li>div {height:0; overflow:hidden; position:absolute;}
.tab>li.on>div {height:auto; position:static; border:1px solid #767676; padding:10px;}
Jquery
$( ".tab>li>a" ).click(function() {
$(this).parent().addClass("on").siblings().removeClass("on");
return false;
});
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 630 | 19년 전 | 2351 | ||
| 629 |
 ⓦangcho |
19년 전 | 2012 | |
| 628 |
ⓦangcho |
19년 전 | 3126 | |
| 627 |
ⓦangcho |
19년 전 | 2034 | |
| 626 |
ⓦangcho |
19년 전 | 2066 | |
| 625 |
ⓦangcho |
19년 전 | 1719 | |
| 624 |
ⓦangcho |
19년 전 | 2224 | |
| 623 | 19년 전 | 2199 | ||
| 622 |
 뜨락의이름 |
19년 전 | 2508 | |
| 621 |
ⓦangcho |
19년 전 | 2910 | |
| 620 |
ⓦangcho |
19년 전 | 2404 | |
| 619 | 19년 전 | 2473 | ||
| 618 | 19년 전 | 3515 | ||
| 617 |
 Elbis |
19년 전 | 3233 | |
| 616 |
Elbis |
19년 전 | 3222 | |
| 615 |
Elbis |
19년 전 | 3039 | |
| 614 |
Elbis |
19년 전 | 2046 | |
| 613 |
Elbis |
19년 전 | 2378 | |
| 612 |
Elbis |
19년 전 | 2239 | |
| 611 |
Elbis |
19년 전 | 2085 | |
| 610 |
Elbis |
19년 전 | 2521 | |
| 609 |
Elbis |
19년 전 | 2422 | |
| 608 |
Elbis |
19년 전 | 2813 | |
| 607 | 19년 전 | 2194 | ||
| 606 | 19년 전 | 3532 | ||
| 605 | 19년 전 | 1989 | ||
| 604 | 19년 전 | 2602 | ||
| 603 | 19년 전 | 1613 | ||
| 602 |
 Dream |
19년 전 | 2836 | |
| 601 | 19년 전 | 3074 | ||
| 600 |
 빨간망토의비밀 |
19년 전 | 2153 | |
| 599 | 19년 전 | 2003 | ||
| 598 | 19년 전 | 2481 | ||
| 597 | 19년 전 | 2389 | ||
| 596 |
ⓦangcho |
19년 전 | 3075 | |
| 595 |
ⓦangcho |
19년 전 | 6754 | |
| 594 | 19년 전 | 2709 | ||
| 593 | 19년 전 | 3186 | ||
| 592 |
 damoa.biz |
19년 전 | 3091 | |
| 591 |
ⓦangcho |
19년 전 | 1931 | |
| 590 | 19년 전 | 3367 | ||
| 589 | 19년 전 | 2209 | ||
| 588 |
ⓦangcho |
19년 전 | 2707 | |
| 587 | 19년 전 | 2346 | ||
| 586 |
 cunic |
19년 전 | 4365 | |
| 585 | 19년 전 | 2487 | ||
| 584 | 19년 전 | 2760 | ||
| 583 |
ⓦangcho |
19년 전 | 3523 | |
| 582 |
ⓦangcho |
19년 전 | 3718 | |
| 581 |
ⓦangcho |
19년 전 | 3256 | |
| 580 | 19년 전 | 2485 | ||
| 579 | 19년 전 | 3075 | ||
| 578 | 19년 전 | 3976 | ||
| 577 | 19년 전 | 3814 | ||
| 576 | 19년 전 | 1754 | ||
| 575 |
ⓦangcho |
19년 전 | 2209 | |
| 574 |
 happycommunity |
19년 전 | 5403 | |
| 573 | 19년 전 | 6718 | ||
| 572 | 19년 전 | 2565 | ||
| 571 | 19년 전 | 2108 | ||
| 570 | 19년 전 | 2601 | ||
| 569 | 19년 전 | 3303 | ||
| 568 | 19년 전 | 3529 | ||
| 567 | 19년 전 | 2981 | ||
| 566 | 19년 전 | 2602 | ||
| 565 |
ⓦangcho |
19년 전 | 4720 | |
| 564 |
ⓦangcho |
19년 전 | 6730 | |
| 563 |
ⓦangcho |
19년 전 | 5011 | |
| 562 |
ⓦangcho |
19년 전 | 5950 | |
| 561 |
ⓦangcho |
19년 전 | 2693 | |
| 560 |
ⓦangcho |
19년 전 | 2540 | |
| 559 |
ⓦangcho |
19년 전 | 2222 | |
| 558 |
ⓦangcho |
19년 전 | 2302 | |
| 557 | 19년 전 | 4595 | ||
| 556 |
 Photofly |
19년 전 | 4668 | |
| 555 | 19년 전 | 2508 | ||
| 554 | 19년 전 | 2175 | ||
| 553 | 19년 전 | 2525 | ||
| 552 |
Photofly |
19년 전 | 3167 | |
| 551 | 19년 전 | 2940 | ||
| 550 |
Elbis |
19년 전 | 1898 | |
| 549 |
Elbis |
19년 전 | 1957 | |
| 548 |
Elbis |
19년 전 | 3146 | |
| 547 |
Elbis |
19년 전 | 2357 | |
| 546 |
Elbis |
19년 전 | 3617 | |
| 545 |
Elbis |
19년 전 | 2548 | |
| 544 |
Elbis |
19년 전 | 1850 | |
| 543 |
Elbis |
19년 전 | 2454 | |
| 542 |
Elbis |
19년 전 | 1729 | |
| 541 |
Elbis |
19년 전 | 1409 | |
| 540 |
Elbis |
19년 전 | 1537 | |
| 539 |
Elbis |
19년 전 | 1804 | |
| 538 |
Elbis |
19년 전 | 1584 | |
| 537 |
Elbis |
19년 전 | 1780 | |
| 536 |
Elbis |
19년 전 | 1562 | |
| 535 |
Elbis |
19년 전 | 1960 | |
| 534 |
Elbis |
19년 전 | 1845 | |
| 533 |
Elbis |
19년 전 | 1449 | |
| 532 |
Elbis |
19년 전 | 1443 | |
| 531 |
Elbis |
19년 전 | 1359 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기