이전
목록
다음
콩

깔끔한 탭메뉴 드립니다.

콩주삼
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-10-28 (월) 21:39:10 · 8697 · 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
16-06-11 조회 3,093
16-02-15 조회 3,324
16-02-02 조회 2,986
16-01-25 조회 2,603
16-01-18 조회 2,703
16-01-08 조회 2,622
16-01-07 조회 2,634
16-01-05 조회 2,670
16-01-05 조회 2,967
16-01-05 조회 2,941
16-01-05 조회 2,816
16-01-04 조회 2,679
16-01-04 조회 2,685
16-01-04 조회 2,635
16-01-04 조회 2,546
15-12-30 조회 2,906
15-12-24 조회 2,713
15-12-24 조회 2,710
15-12-24 조회 2,734
15-12-24 조회 2,692
15-12-23 조회 2,681
15-12-16 조회 2,772
15-12-15 조회 2,833
15-12-11 조회 2,965
15-12-10 조회 2,824
15-11-09 조회 2,803
15-11-09 조회 3,025
15-10-06 조회 3,358
15-10-02 조회 3,138
15-05-29 조회 4,470
15-02-02 조회 4,448
15-01-18 조회 4,441
14-10-25 조회 8,389
14-10-25 조회 5,173
14-10-22 조회 7,173
14-10-22 조회 4,876
14-10-22 조회 4,830
14-10-18 조회 5,698
14-10-17 조회 6,078
14-10-17 조회 5,457
14-10-17 조회 8,994
14-10-17 조회 6,474
14-10-13 조회 4,398
14-10-13 조회 4,498
14-10-07 조회 6,173
14-09-24 조회 3,941
14-09-23 조회 4,006
14-09-22 조회 4,921
14-09-22 조회 6,144
14-09-22 조회 4,109
14-09-22 조회 3,789
14-09-21 조회 4,412
14-09-21 조회 3,901
14-09-20 조회 3,898
14-09-20 조회 3,806
14-09-20 조회 3,980
14-09-19 조회 3,910
14-09-19 조회 4,067
14-09-19 조회 3,960
14-09-19 조회 4,327
14-09-19 조회 3,978
14-09-19 조회 3,908
14-09-19 조회 4,191
14-09-19 조회 3,930
14-09-19 조회 3,976
14-09-19 조회 3,957
14-09-18 조회 4,028
14-09-18 조회 3,989
14-09-18 조회 4,258
14-09-18 조회 4,230
14-09-18 조회 4,240
14-09-18 조회 4,935
14-09-18 조회 5,477
14-09-18 조회 5,366
14-09-18 조회 4,175
14-09-18 조회 4,671
14-09-18 조회 4,282
14-08-30 조회 5,546
14-08-06 조회 6,034
14-08-06 조회 5,648
14-08-03 조회 5,286
14-06-12 조회 5,558
14-05-11 조회 3,744
14-05-11 조회 4,507
14-05-11 조회 4,604
14-05-09 조회 1.3만
14-05-01 조회 5,206
14-03-30 조회 4,406
14-03-23 조회 8,033
14-02-12 조회 3,922
13-10-29 조회 7,870
13-10-28 조회 8,698
13-09-29 조회 6,667
13-09-29 조회 4,292
13-07-23 조회 5,170
13-07-23 조회 1.2만
13-07-14 조회 4,695
13-07-14 조회 5,086
13-07-14 조회 6,045
13-07-14 조회 5,327
글쓰기