깔끔한 탭메뉴 드립니다.

콩주삼

· 12년 전 · 조회 9436 9436 · 댓글 1 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>
<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>
<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>

</div> 

</div> 
</body>
</html>

댓글 작성

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

로그인하기

댓글 1개

꿈의세계

프로필 보기 이 회원 글보기

11년 전

전 왜 되지 않을까요

게시글 목록

번호	제목	글쓴이	조회	날짜
17657	자바스크립 시계 [한국시간 고정] 8	오땡스	1,322	2년 전
17655	라라곤 6.0 데이타베이스 패스워드 설정하기 1	마젠토	1,394	2년 전
17654	기타 특정 기기 접근 금지시키는 스크립트	Tak2	806	2년 전
17653	JavaScript ThreeJS - 3D Bar and Progress Bar 1	swallow	1,032	2년 전
17652	node.js RAM점유크기에 의한 노드서버관리	swallow	729	2년 전
17651	JavaScript Javascript Undo, Redo 기능 구현하기	swallow	1,493	2년 전
17650	PHP PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법	swallow	837	2년 전
17642	node.js nodejs서버가 사용중인 메모리에 대한 로그	swallow	673	2년 전
17633	node.js node.js에서 스케쥴링작성 8	swallow	1,191	2년 전
17632	PHP 파일의 MIME 타입을 얻기 위한 클래스 1	swallow	1,579	2년 전
17631	MySQL InnoDB와 MyISAM의 우단점	swallow	1,081	2년 전
17630	PHP 코드이그나이터와 라라벨의 비교 1	swallow	2,022	2년 전
17628	JavaScript 자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기	swallow	851	2년 전
17624	기타 일반 tcp소켓과 웹소켓의 비교 5	swallow	2,968	2년 전
17623	기타 다중 소켓 포트와 한 개의 소켓 포트 비교	swallow	658	2년 전
17620	node.js tcp소켓과 websocket 의 비교 2	swallow	1,049	2년 전
17618	JavaScript JavaScript로 이미지의 부분 영역을 따내기	swallow	1,499	2년 전
17617	node.js JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법	swallow	717	2년 전
17614	node.js Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법	swallow	1,733	2년 전
17612	node.js 노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 1	swallow	1,283	2년 전
17611	PHP PHP를 사용하여 TCP 소켓 서버를 만드는 방법	swallow	1,931	2년 전
17610	node.js nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 1	swallow	677	2년 전
17609	PHP PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 2	swallow	3,005	2년 전
17608	node.js Node.js로 지속적인 핑 결과를 파일로 저장	swallow	665	2년 전
17607	정규표현식 특수문자 제거, 우리글짜가 있는지 체크	swallow	620	2년 전
17604	node.js Node.js에서 PDF 파일의 페이지 수를 얻기	swallow	864	2년 전
17603	PHP PHP로 pdf의 페이지수를 얻기 1	swallow	1,102	2년 전
17602	node.js Node.js로 워터마킹 기능을 구현하는 방법	swallow	1,044	2년 전
17600	PHP PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지	swallow	1,396	2년 전
17594	node.js NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 2	swallow	999	2년 전

이전 다음

3 4 5 6 7

전체 목록

강좌