이런 테이블은 어떻게 만드나요? 정보
이런 테이블은 어떻게 만드나요?본문
B를 클릭하면 B내용이 나오는 테이블인데요.
예전에 자바스크립트가 있어서 테이블 TD에 레이어로 온 오프로 해서
만들었던 기억이 나는데.. 그 소스가 없어졌네요.
자바스크립트는 수정안해도 되고 테이블의 경우 A,B,C,D 이런식으로 늘리기
쉬운 소스거든요. 벌써 몇년전인데..
갑자기 저 테이블 사용할일이 ㅠㅠ;;;
생각이 안나요.. 알려주세요~
댓글 전체
http://nkpolymer.cafe24.com/nk/2_1.php
이런걸 말씀하시는지요?
이런걸 말씀하시는지요?
js파일
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').mouseover(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').mouseover();});
css파일
/*ul,li,ol{ list-style:none;}*/
UL.tabNavigation { list-style: none; margin: 0; padding: 0; }
UL.tabNavigation LI { display: inline; }
UL.tabNavigation LI A { padding: 3px 5px; /*background-color: #ccc;*/ color: #000; text-decoration: none; }
UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover { /*background-color: red;*/ color: red; padding-top: 7px;}
UL.tabNavigation LI A:focus {outline: 0;}
div.tabs > div { padding: 5px; margin-top: 3px; border:0px solid #333; }
div.tabs > div h2 { margin-top: 0; }
#first { background-color: #fff; }
#second { background-color: #fff; }
#third { background-color: #fff; }
#four { background-color: #fff; }
/*탭네비게이션시작*/
UL.tabNavigation { list-style: none; margin: 0; padding: 0; }
UL.tabNavigation LI { display: inline; }
UL.tabNavigation LI A { padding: 3px 5px; /*background-color: #ccc;*/ color: #000; text-decoration: none; }
UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover { /*background-color: red;*/ color: red; padding-top: 7px;}
UL.tabNavigation LI A:focus {outline: 0;}
div.tabs > div { padding: 5px; margin-top: 3px; border:0px solid #333; }
div.tabs > div h2 { margin-top: 0; }
#first { background-color: #fff; }
#second { background-color: #fff; }
#third { background-color: #fff; }
#four { background-color: #fff; }
#five { background-color: #fff; }
/*탭네비게이션끋*/
본문
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">1</a></li> |
<li><a href="#second">2</a></li> |
<li><a href="#third">3</a></li> |
<li><a href="#four">4</a></li> |
<li><a href="#five">5</a></li>
</ul>
<div id="first">
내용
</div>
<div id="second">
내용
</div>
<div id="third">
내용
</div>
<div id="four">
내용
</div>
<div id="five">
내용
</div>
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').mouseover(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').mouseover();});
css파일
/*ul,li,ol{ list-style:none;}*/
UL.tabNavigation { list-style: none; margin: 0; padding: 0; }
UL.tabNavigation LI { display: inline; }
UL.tabNavigation LI A { padding: 3px 5px; /*background-color: #ccc;*/ color: #000; text-decoration: none; }
UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover { /*background-color: red;*/ color: red; padding-top: 7px;}
UL.tabNavigation LI A:focus {outline: 0;}
div.tabs > div { padding: 5px; margin-top: 3px; border:0px solid #333; }
div.tabs > div h2 { margin-top: 0; }
#first { background-color: #fff; }
#second { background-color: #fff; }
#third { background-color: #fff; }
#four { background-color: #fff; }
/*탭네비게이션시작*/
UL.tabNavigation { list-style: none; margin: 0; padding: 0; }
UL.tabNavigation LI { display: inline; }
UL.tabNavigation LI A { padding: 3px 5px; /*background-color: #ccc;*/ color: #000; text-decoration: none; }
UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover { /*background-color: red;*/ color: red; padding-top: 7px;}
UL.tabNavigation LI A:focus {outline: 0;}
div.tabs > div { padding: 5px; margin-top: 3px; border:0px solid #333; }
div.tabs > div h2 { margin-top: 0; }
#first { background-color: #fff; }
#second { background-color: #fff; }
#third { background-color: #fff; }
#four { background-color: #fff; }
#five { background-color: #fff; }
/*탭네비게이션끋*/
본문
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">1</a></li> |
<li><a href="#second">2</a></li> |
<li><a href="#third">3</a></li> |
<li><a href="#four">4</a></li> |
<li><a href="#five">5</a></li>
</ul>
<div id="first">
내용
</div>
<div id="second">
내용
</div>
<div id="third">
내용
</div>
<div id="four">
내용
</div>
<div id="five">
내용
</div>
감사합니다. 그런데 마우스 올려서 바뀌는게 아니고.. 클릭했을때를 원했구요 ^^
div 사용이 아니고 그냥 테이블 사용이라는 ....
제가 너무 구식인가요 ㅎㅎㅎㅎ
잘 사용하겠습니다.
div 사용이 아니고 그냥 테이블 사용이라는 ....
제가 너무 구식인가요 ㅎㅎㅎㅎ
잘 사용하겠습니다.
클릭했을때 원하시면 js파일 mouseover명령을 click로 바꾸면됩니다
검색하면나올거예요
div안에 테이블 넣으면돼요?
검색하면나올거예요
div안에 테이블 넣으면돼요?
