이전
목록
다음
콩

깔끔한 탭메뉴 드립니다.

콩주삼
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-10-28 (월) 21:39:10 · 8648 · 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,832
13-10-28 조회 8,649
13-10-28 조회 3,832
13-10-28 조회 3,392
13-10-27 조회 3,014
13-10-26 조회 3,733
13-10-25 조회 3,459
13-10-24 조회 3,431
13-10-24 조회 3,166
13-10-24 조회 3,489
13-10-24 조회 4,080
13-10-23 조회 4,237
13-10-23 조회 3,496
13-10-22 조회 4,724
13-10-21 조회 3,231
13-10-20 조회 3,561
13-10-18 조회 4,470
13-10-17 조회 4,797
13-10-15 조회 4,716
13-10-11 조회 4,596
13-10-10 조회 5,200
13-10-10 조회 3,685
13-10-08 조회 4,207
13-10-03 조회 6,266
13-10-02 조회 4,127
13-10-02 조회 4,395
13-10-02 조회 4,167
13-10-02 조회 3,662
13-10-02 조회 3,919
13-10-02 조회 3,785
13-10-02 조회 4,153
13-09-29 조회 4,711
13-09-29 조회 4,155
13-09-29 조회 4,030
13-09-29 조회 6,620
13-09-29 조회 4,243
13-09-27 조회 3,561
13-09-27 조회 4,190
13-09-24 조회 3,259
13-09-24 조회 3,537
13-09-18 조회 3,947
13-09-17 조회 3,797
13-09-16 조회 7,998
13-09-16 조회 5,358
13-09-16 조회 4,336
13-09-15 조회 3,184
13-09-13 조회 4,874
13-09-13 조회 3,361
13-09-13 조회 3,653
13-09-12 조회 3,459
13-09-11 조회 6,223
13-09-10 조회 3,508
13-09-10 조회 6,119
13-09-10 조회 3,882
13-09-09 조회 4,266
13-09-09 조회 4,915
13-09-07 조회 5,020
13-09-07 조회 3,108
13-09-06 조회 3,227
13-09-06 조회 3,845
13-09-06 조회 3,208
13-09-05 조회 3,377
13-09-05 조회 9,532
13-09-04 조회 3,072
13-09-04 조회 3,333
13-09-04 조회 3,009
13-09-03 조회 3,110
13-09-03 조회 3,539
13-08-30 조회 3,367
13-08-30 조회 4,448
13-08-29 조회 4,401
13-08-28 조회 3,920
13-08-28 조회 8,094
13-08-27 조회 4,081
13-08-26 조회 4,288
13-08-26 조회 3,515
13-08-26 조회 4,799
13-08-23 조회 4,082
13-08-23 조회 5,814
13-08-22 조회 5,342
13-08-22 조회 4,550
13-08-22 조회 5,059
13-08-22 조회 4,652
13-08-22 조회 4,563
13-08-22 조회 3,568
13-08-20 조회 3,806
13-08-18 조회 8,511
13-08-18 조회 5,360
13-08-17 조회 5,960
13-08-17 조회 4,820
13-08-17 조회 4,307
13-08-14 조회 3,345
13-08-12 조회 4,355
13-08-11 조회 3,531
13-08-09 조회 4,030
13-08-08 조회 5,264
13-08-08 조회 5,006
13-08-08 조회 4,396
13-08-08 조회 9,303
13-08-08 조회 5,514
글쓰기