테스트 사이트 - 개발 중인 베타 버전입니다
SIR

깔끔한 jquery+css 탭 메뉴입니다.

개발자 기타
잘살아보자
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 11년 전 · 3544

<!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> 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

스팸로봇의 이메일 수집 방지 [3]

#개발자 #php
세세븐데이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

레이어팝업 스크립트 문의 [1]

#개발자 #javascript
제제이티37
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

vi로 URL 열기 [8]

#개발자 #기타
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

1원짜리팁 현재 사이트 쿠키 알아내기 [3]

#개발자 #javascript
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

1원짜리팁 자바스크립트로 좌우 공백 제거구현하기 [3]

#개발자 #javascript
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

Please help me.Fatal error: Call to undefined function dbconn_error() [1]

#개발자 #php
OOkta
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

Apache2, PHP, Oracle(MySQL) 웹 연동 설치 [1]

#개발자 #mysql
세세븐데이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

몇일째 테스트 중인데 머가 문제인지 죽어도 모르겠습니다. 고수님들 도와줴요..ㅠㅠ [7]

#개발자 #php
개개도
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

Zen Coding in Editplus (HTML,CSS 코딩을 빠르게) [1]

#개발자 #기타
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

화일을 캐쉬 주고 압축해서 보내기 [2]

#개발자 #웹서버
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

캐쉬 삭제 [1]

#개발자 #php
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

모바일 웹 사용시 줌 비허용하기 [1]

#개발자 #기타
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

절댓값 리턴 함수 [1]

#개발자 #php
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

자동 스크롤바 사용하기 [2]

#개발자 #javascript
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

일주기 시간대별로 플래시무비 자동 교체시키기 [1]

#개발자 #javascript
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

TEXTATEA 창늘리기~ [1]

#개발자 #javascript
ssenseme
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

UTF-8 문자열 자르기 함수 [1]

#개발자 #php
PPASKRAN
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

브라우저 가로사이즈에 반응하여 css로 균등한 간격으로 정렬하기~_~ [10]

#퍼블리셔 #반응형
스아이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

상단 가운데 정렬 , 스크롤시 상단에 고정... [5]

#개발자 #jquery
열매
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

제이쿼리를 이용한 파일 업로드 관련 자료 입니다. [5]

#개발자 #jquery
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

제이쿼리 효과2입니다. [4]

#개발자 #jquery
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

제이쿼리 fadein 효과 [5]

#개발자 #jquery
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

간단하게 파일을 쓰거나 읽는 함수입니다 [2]

#개발자 #php
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

페이스북 댓글창, 좋아요 달기 [3]

#개발자 #javascript
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전

IP중간 * 표시 하기 [2]

#개발자 #php
프프로프리랜서
프로필 보기이 회원 글보기이 회원의 댓글보기
• 12년 전