이전
목록
다음
콩

깔끔한 탭메뉴 드립니다.

콩주삼
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-10-28 (월) 21:39:10 · 8703 · 1
개발하다가 버리기 아까워서 올립니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<title>아웃도어 쇼핑 :: 비박 :: 등산 :: 낚시 :: 캠핑 - 칼데라 쇼핑</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<link rel="stylesheet" type="text/css" href="tabs.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function() {

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active").css("color","#333");
//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});
$(this).addClass("active").css("color","darkred");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn()
});
});

</script>


<style type="text/css">

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
width: 100%;
font-family:"dotum";
font-size:12px;
}
ul.tabs li {
float: left;
        text-align:center;
cursor: pointer;
width:82px;
height: 31px;
line-height: 31px;
border: 1px solid #eee;
border-left: none;
font-weight: bold;
background: #fafafa;
overflow: hidden;
position: relative;
}

ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #eee;
border-top: none;
clear: both;
float: left;
width: 248px;
background: #FFFFFF;

}
.tab_content {
padding: 5px;
font-size: 12px;
display: none;
}
.tab_container .tab_content ul {width:100%; margin:0px; padding:0px;}
.tab_container .tab_content ul li{padding:5px; list-style:none};
#container {width: 249px; margin: 0 auto;
}
</style>

</head>

<body>
<div id="container">

  <ul class="tabs">
        <li class="active" rel="tab1">공지사항</li>
        <li rel="tab2">구매랭킹</li>
        <li rel="tab3">공지사항</li>
    </ul>

<div class="tab_container">

    <div id="tab1" class="tab_content">
                        <ul>   
                                <li><a href="#">이것은 두 번째 탭의</a></li>
                                <li><a href="#">이것은 두 번째 탭의</a></li>
                                <li><a href="#">이것은 두 번째 탭의</a></li>
                                <li><a href="#">이것은 두 번째 탭의</a></li>
                                <li><a href="#">이것은 두 번째 탭의</a></li>
                        </ul>
    </div><!-- #tab1 -->
    <div id="tab2" class="tab_content">
      2222Mortal Kombat returns after a lengthy hiatus and puts players
      back into the Tournament for 2D fighting with gruesome combat.
    </div><!-- #tab2 -->
    <div id="tab3" class="tab_content">
      3333Halo: Reach is the culmination of the superlative combat, sensational
      multiplayer, and seamless online integration that are the hallmarks
      of this superb series.
    </div><!-- #tab3 -->
   
 </div> <!-- .tab_container -->

</div> <!-- #container -->
</body>
</html>
#개발자팁 #개발자 #팁자료실 #jquery
글쓰기

댓글 1개

꿈의세계
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-09-11 (목) 22:18:04
전 왜 되지 않을까요
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-10-29 조회 7,873
13-10-28 조회 8,704
13-10-28 조회 3,880
13-10-28 조회 3,425
13-10-27 조회 3,048
13-10-26 조회 3,765
13-10-25 조회 3,497
13-10-24 조회 3,470
13-10-24 조회 3,201
13-10-24 조회 3,525
13-10-24 조회 4,113
13-10-23 조회 4,279
13-10-23 조회 3,535
13-10-22 조회 4,776
13-10-21 조회 3,273
13-10-20 조회 3,596
13-10-18 조회 4,530
13-10-17 조회 4,891
13-10-15 조회 4,786
13-10-11 조회 4,636
13-10-10 조회 5,259
13-10-10 조회 3,716
13-10-08 조회 4,253
13-10-03 조회 6,331
13-10-02 조회 4,186
13-10-02 조회 4,465
13-10-02 조회 4,241
13-10-02 조회 3,716
13-10-02 조회 3,974
13-10-02 조회 3,826
13-10-02 조회 4,198
13-09-29 조회 4,762
13-09-29 조회 4,209
13-09-29 조회 4,077
13-09-29 조회 6,668
13-09-29 조회 4,296
13-09-27 조회 3,605
13-09-27 조회 4,237
13-09-24 조회 3,295
13-09-24 조회 3,570
13-09-18 조회 3,996
13-09-17 조회 3,856
13-09-16 조회 8,047
13-09-16 조회 5,409
13-09-16 조회 4,370
13-09-15 조회 3,228
13-09-13 조회 4,925
13-09-13 조회 3,400
13-09-13 조회 3,692
13-09-12 조회 3,498
13-09-11 조회 6,293
13-09-10 조회 3,562
13-09-10 조회 6,151
13-09-10 조회 3,925
13-09-09 조회 4,305
13-09-09 조회 4,950
13-09-07 조회 5,051
13-09-07 조회 3,144
13-09-06 조회 3,257
13-09-06 조회 3,881
13-09-06 조회 3,238
13-09-05 조회 3,416
13-09-05 조회 9,575
13-09-04 조회 3,104
13-09-04 조회 3,368
13-09-04 조회 3,049
13-09-03 조회 3,150
13-09-03 조회 3,571
13-08-30 조회 3,397
13-08-30 조회 4,482
13-08-29 조회 4,429
13-08-28 조회 3,939
13-08-28 조회 8,128
13-08-27 조회 4,107
13-08-26 조회 4,317
13-08-26 조회 3,551
13-08-26 조회 4,842
13-08-23 조회 4,127
13-08-23 조회 5,871
13-08-22 조회 5,405
13-08-22 조회 4,608
13-08-22 조회 5,121
13-08-22 조회 4,703
13-08-22 조회 4,614
13-08-22 조회 3,602
13-08-20 조회 3,845
13-08-18 조회 8,564
13-08-18 조회 5,452
13-08-17 조회 6,072
13-08-17 조회 4,911
13-08-17 조회 4,361
13-08-14 조회 3,394
13-08-12 조회 4,412
13-08-11 조회 3,582
13-08-09 조회 4,091
13-08-08 조회 5,317
13-08-08 조회 5,058
13-08-08 조회 4,443
13-08-08 조회 9,343
13-08-08 조회 5,561
글쓰기