사이트 구축·운영 인사이트, SIR 블로그
이전
목록
다음
콩

깔끔한 탭메뉴 드립니다.

콩주삼
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-10-28 (월) 21:39:10 · 8671 · 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-12-07 조회 3,089
13-12-06 조회 2,604
13-12-06 조회 3,151
13-12-06 조회 2,729
13-12-06 조회 2,948
13-12-06 조회 2,635
13-12-06 조회 3,376
13-12-06 조회 3,704
13-12-06 조회 2,727
13-12-06 조회 2,671
13-12-06 조회 3,757
13-12-05 조회 2,715
13-12-05 조회 3,312
13-12-05 조회 3,171
13-12-05 조회 3,576
13-12-05 조회 3,485
13-12-04 조회 8,302
13-12-03 조회 3,449
13-12-02 조회 2,735
13-12-02 조회 2,584
13-11-30 조회 2,528
13-11-29 조회 2,784
13-11-28 조회 2,997
13-11-27 조회 3,595
13-11-27 조회 2,985
13-11-27 조회 3,369
13-11-27 조회 2,521
13-11-27 조회 2,691
13-11-27 조회 4,730
13-11-26 조회 3,980
13-11-25 조회 3,474
13-11-25 조회 5,274
13-11-23 조회 2,635
13-11-23 조회 4,737
13-11-23 조회 4,294
13-11-23 조회 4,059
13-11-23 조회 4,005
13-11-22 조회 3,013
13-11-22 조회 3,692
13-11-22 조회 3,555
13-11-22 조회 3,102
13-11-22 조회 5,510
13-11-21 조회 2,743
13-11-21 조회 3,233
13-11-20 조회 3,608
13-11-19 조회 4,041
13-11-19 조회 3,049
13-11-19 조회 3,668
13-11-19 조회 3,013
13-11-19 조회 4,780
13-11-18 조회 3,058
13-11-18 조회 2,873
13-11-18 조회 3,182
13-11-18 조회 4,924
13-11-18 조회 4,323
13-11-18 조회 6,783
13-11-18 조회 4,009
13-11-18 조회 4,422
13-11-18 조회 3,800
13-11-18 조회 3,860
13-11-18 조회 3,133
13-11-16 조회 3,165
13-11-15 조회 4,407
13-11-15 조회 3,184
13-11-14 조회 2,927
13-11-14 조회 3,684
13-11-14 조회 4,046
13-11-13 조회 3,178
13-11-13 조회 3,225
13-11-13 조회 3,406
13-11-13 조회 4,271
13-11-13 조회 3,102
13-11-12 조회 3,414
13-11-12 조회 5,620
13-11-07 조회 3,157
13-11-07 조회 3,134
13-11-06 조회 3,087
13-11-05 조회 3,798
13-11-05 조회 3,566
13-11-05 조회 6,607
13-11-05 조회 3,548
13-11-04 조회 3,154
13-11-04 조회 3,180
13-11-04 조회 2,962
13-11-02 조회 3,616
13-11-02 조회 3,243
13-11-01 조회 3,489
13-11-01 조회 2,871
13-11-01 조회 3,026
13-10-31 조회 3,095
13-10-31 조회 3,492
13-10-31 조회 3,886
13-10-31 조회 3,069
13-10-30 조회 3,375
13-10-30 조회 7,635
13-10-30 조회 5,452
13-10-30 조회 3,346
13-10-29 조회 3,185
13-10-29 조회 4,351
13-10-29 조회 3,605
글쓰기