jQuery 관련이라 질문을 올려보는데 혹여 성격에 안 맞는다면 바로 삭제하겠습니다. 죄송합니다.
추가]http://sir.co.kr/bbs/board.php?bo_table=sg_jquery&wr_id=359&sca=&sfl=&stx=&spt=0
아샬님이 올리신 탭메뉴 소스가 있었네요.
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li><a href="#" class="active">TAB 1</a></li>
<li><a href="#">TAB 2</a></li>
<li><a href="#">TAB 3</a></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
<div id="Navigation">
<ul id="primary">
<li><a href="#" class="active">TAB 1</a></li>
<li><a href="#">TAB 2</a></li>
<li><a href="#">TAB 3</a></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
var tabname = $(this).text();
tabname = tabname.replace(' ','');
$("#"+tabname).css("display","block");
});
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
var tabname = $(this).text();
tabname = tabname.replace(' ','');
$("#"+tabname).css("display","block");
});
</script>
빨간색으로 표시한 부분을 .text 로 받아오면 탭메뉴 부분이 어쩔 수 없이 TAB1, TAB2 가 되는 구조인데요.
탭메뉴를 가, 나, 다 처럼 하고 싶을 때는 어떻게 해야 될까요. 그냥 div id 값에 한글을 넣어도 될까요?
댓글 21개
Americano
14년 전
앵커에 title을 넣은 후 title의 값을 긁어오면 되지않나요?
14년 전
<ul id="primary">
<li><a href="#" title="TAB1" class="active">가</a></li>
<li><a href="#" title="TAB2">나</a></li>
<li><a href="#" title="TAB3">다</a></li>
</ul>
로 수정하고
var tabname = $(this).text();
tabname = tabname.replace(' ','');
를
var tabname = $(this).title();
로 고쳐봤는데 안 되네요...;;
<li><a href="#" title="TAB1" class="active">가</a></li>
<li><a href="#" title="TAB2">나</a></li>
<li><a href="#" title="TAB3">다</a></li>
</ul>
로 수정하고
var tabname = $(this).text();
tabname = tabname.replace(' ','');
를
var tabname = $(this).title();
로 고쳐봤는데 안 되네요...;;
Americano
14년 전
var tabname = $(this).attr('title');
14년 전
감사합니다!
Americano
14년 전
수정하셨으면
tabname = tabname.replace(' ','');
이부분은 필요없겠네요~
tabname = tabname.replace(' ','');
이부분은 필요없겠네요~
14년 전
네 지우고 쓰고 있습니다 ^^
Terrorboy
14년 전
소스에 요지는...
탭123중 하나를 클릭하면 그거에 맞게 텍스트가 출력되면되는건가요?
탭123중 하나를 클릭하면 그거에 맞게 텍스트가 출력되면되는건가요?
Terrorboy
14년 전
답변이 나왔네..
14년 전
저는 이렇게 한번 해봤습니다.
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li class="TAB1"><a href="#" class="active">가</a></li>
<li class="TAB2"><a href="#">나</a></li>
<li class="TAB3"><a href="#">다</a></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
//var tabname = $(this).text();
var tabname = $(this).parent("li").attr("class");
tabname = tabname.replace(' ','');
$("#"+tabname).css("display","block");
});
</script>
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li class="TAB1"><a href="#" class="active">가</a></li>
<li class="TAB2"><a href="#">나</a></li>
<li class="TAB3"><a href="#">다</a></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
//var tabname = $(this).text();
var tabname = $(this).parent("li").attr("class");
tabname = tabname.replace(' ','');
$("#"+tabname).css("display","block");
});
</script>
14년 전
오호 이런 방법도 있군요.
14년 전
이리저리 해보다 보니 li 에 class 로 스타일을 먹여줘야 할 때가 문제네요.
<li class="tab1 style">~</li>
<li class="tab1 style">~</li>
14년 전
이럼 되죠?
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li><a href="#" class="active">가</a><div style="display:none;" class="TAB1"></div></li>
<li><a href="#">나</a><div style="display:none;" class="TAB2"></div></li>
<li><a href="#">다</a><div style="display:none;" class="TAB3"></div></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
//var tabname = $(this).text();
var tabname = $(this).next("div").attr("class");
tabname = tabname.replace(' ','');
$("#"+tabname).css("display","block");
});
</script>
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li><a href="#" class="active">가</a><div style="display:none;" class="TAB1"></div></li>
<li><a href="#">나</a><div style="display:none;" class="TAB2"></div></li>
<li><a href="#">다</a><div style="display:none;" class="TAB3"></div></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
//var tabname = $(this).text();
var tabname = $(this).next("div").attr("class");
tabname = tabname.replace(' ','');
$("#"+tabname).css("display","block");
});
</script>
14년 전
display:none 을 일괄적용하고 싶어서 스타일을 적용하면요? ㅎㅎㅎ;;
14년 전
display:none 하고는 관련이 없을텐데요.
next("div") 니까요.
next("div") 니까요.
14년 전
<style type="text/css">
div.display_none{display:none}
</style>
이란 스타일시트가 있을 때
<li><a href="#" class="active">가</a><div class="TAB1 display_none"></div></li>
<li><a href="#">나</a><div class="TAB2 display_none"></div></li>
<li><a href="#">다</a><div class="TAB3 display_none"></div></li>
이렇게 되면 클래스명을 'TAB1 display_none' 으로 읽어오니까 아이디를 저렇게 해야 하잖아요 ㅋㅋㅋ
div.display_none{display:none}
</style>
이란 스타일시트가 있을 때
<li><a href="#" class="active">가</a><div class="TAB1 display_none"></div></li>
<li><a href="#">나</a><div class="TAB2 display_none"></div></li>
<li><a href="#">다</a><div class="TAB3 display_none"></div></li>
이렇게 되면 클래스명을 'TAB1 display_none' 으로 읽어오니까 아이디를 저렇게 해야 하잖아요 ㅋㅋㅋ
14년 전
음~ 몰라욧!!!
14년 전
'ㅛ'
14년 전
완전 정복
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li class="TAB1 first"><a href="#" class="active">가</a></li>
<li class="TAB2"><a href="#">나</a></li>
<li class="the TAB3 end"><a href="#">다</a></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
$(this).parent("li").attr("class", function() {
var pattern = /\b(TAB\d+)\b/;
var result = this.className.match(pattern);
if (result != null) {
$("#"+result[1]).css("display","block");
}
});
});
</script>
<div id="Wrapper">
<div id="Navigation">
<ul id="primary">
<li class="TAB1 first"><a href="#" class="active">가</a></li>
<li class="TAB2"><a href="#">나</a></li>
<li class="the TAB3 end"><a href="#">다</a></li>
</ul>
</div>
<div id="Container">
<div id="Content">
<div id="TAB1" style="">
<h1>Tab One</h1>
<p>
This is tab one. You can put specific information for tab one here.
</p>
</div>
<div id="TAB2" style="display: none;">
<h1>Tab Two</h1>
<p>
This is tab two. You can put specific information for tab one here.
</p>
</div>
<div id="TAB3" style="display: none;">
<h1>Tab Three</h1>
<p>
This is tab three. You can put specific information for tab one here.
</p>
</div>
</div>
</div>
</div>
<script>
$("#primary a").click(function(){
$("#primary a").removeClass("active");
$(this).addClass("active");
$("#Content div").css("display", "none");
$(this).parent("li").attr("class", function() {
var pattern = /\b(TAB\d+)\b/;
var result = this.className.match(pattern);
if (result != null) {
$("#"+result[1]).css("display","block");
}
});
});
</script>
14년 전
오홍! 일단 한번 해보겠습니다. ㅎ
14년 전
!
MH코리아
14년 전
역시;;;여기 jQuery 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4630 | 13년 전 | 1190 | ||
| 4629 | 13년 전 | 4363 | ||
| 4628 | 13년 전 | 767 | ||
| 4627 |
 cshop |
13년 전 | 1761 | |
| 4626 | 13년 전 | 817 | ||
| 4625 |
마릴릴모니
|
13년 전 | 738 | |
| 4624 | 13년 전 | 1640 | ||
| 4623 |
SIR정회원
|
13년 전 | 620 | |
| 4622 |
rakoos
|
13년 전 | 1578 | |
| 4621 | 13년 전 | 688 | ||
| 4620 | 13년 전 | 1476 | ||
| 4619 | 13년 전 | 1002 | ||
| 4618 | 13년 전 | 4052 | ||
| 4617 | 13년 전 | 2044 | ||
| 4616 | 13년 전 | 863 | ||
| 4615 | 13년 전 | 686 | ||
| 4614 | 13년 전 | 1255 | ||
| 4613 | 13년 전 | 895 | ||
| 4612 |
rakoos
|
13년 전 | 1022 | |
| 4611 |
 스터디24 |
13년 전 | 2118 | |
| 4610 | 13년 전 | 772 | ||
| 4609 | 13년 전 | 2823 | ||
| 4608 | 13년 전 | 2814 | ||
| 4607 | 13년 전 | 1079 | ||
| 4606 | 13년 전 | 776 | ||
| 4605 | 13년 전 | 2317 | ||
| 4604 | 13년 전 | 893 | ||
| 4603 | 13년 전 | 1141 | ||
| 4602 |
한번잘해보자
|
13년 전 | 690 | |
| 4601 | 13년 전 | 1808 | ||
| 4600 |
 가나다라마바사아자차카타파하 |
13년 전 | 1091 | |
| 4599 |
크라운엠버서더
|
13년 전 | 1154 | |
| 4598 | 13년 전 | 1505 | ||
| 4597 | 13년 전 | 604 | ||
| 4596 | 13년 전 | 3693 | ||
| 4595 |
cshop |
13년 전 | 922 | |
| 4594 | 13년 전 | 1799 | ||
| 4593 | 13년 전 | 1290 | ||
| 4592 | 13년 전 | 665 | ||
| 4591 | 13년 전 | 4650 | ||
| 4590 | 13년 전 | 525 | ||
| 4589 | 13년 전 | 2640 | ||
| 4588 |
 raineye |
13년 전 | 996 | |
| 4587 | 13년 전 | 661 | ||
| 4586 |
JavaDD
|
13년 전 | 1020 | |
| 4585 | 13년 전 | 7795 | ||
| 4584 | 13년 전 | 990 | ||
| 4583 |
PHPㅡASP프로그래머
|
13년 전 | 2066 | |
| 4582 |
PHPㅡASP프로그래머
|
13년 전 | 1504 | |
| 4581 |
PHPㅡASP프로그래머
|
13년 전 | 1026 | |
| 4580 | 13년 전 | 4099 | ||
| 4579 |
 미운오리스키 |
13년 전 | 693 | |
| 4578 | 13년 전 | 1193 | ||
| 4577 | 13년 전 | 823 | ||
| 4576 |
Kanzi
|
13년 전 | 882 | |
| 4575 |
 웹디자인연구소 |
13년 전 | 1563 | |
| 4574 | 13년 전 | 2354 | ||
| 4573 |
달빛소나타
|
13년 전 | 884 | |
| 4572 | 13년 전 | 1003 | ||
| 4571 | 13년 전 | 946 | ||
| 4570 |
웹디자인연구소 |
13년 전 | 1319 | |
| 4569 |
한번잘해보자
|
13년 전 | 563 | |
| 4568 |
Raizond
|
13년 전 | 1035 | |
| 4567 |
Raizond
|
13년 전 | 542 | |
| 4566 |
Revenge
|
13년 전 | 956 | |
| 4565 |
가나다라마바사아자차카타파하 |
13년 전 | 712 | |
| 4564 |
 Terrorboy |
13년 전 | 1145 | |
| 4563 | 13년 전 | 1576 | ||
| 4562 | 13년 전 | 1226 | ||
| 4561 | 13년 전 | 9407 | ||
| 4560 | 13년 전 | 1811 | ||
| 4559 | 13년 전 | 3371 | ||
| 4558 | 13년 전 | 485 | ||
| 4557 | 13년 전 | 1457 | ||
| 4556 | 13년 전 | 718 | ||
| 4555 | 13년 전 | 559 | ||
| 4554 | 13년 전 | 550 | ||
| 4553 |
 프로페셔널 |
13년 전 | 4314 | |
| 4552 | 13년 전 | 1515 | ||
| 4551 | 13년 전 | 1994 | ||
| 4550 | 13년 전 | 686 | ||
| 4549 | 13년 전 | 1042 | ||
| 4548 | 13년 전 | 1581 | ||
| 4547 | 13년 전 | 567 | ||
| 4546 | 13년 전 | 1623 | ||
| 4545 | 13년 전 | 1339 | ||
| 4544 | 13년 전 | 3041 | ||
| 4543 | 13년 전 | 1019 | ||
| 4542 | 13년 전 | 2273 | ||
| 4541 | 13년 전 | 1141 | ||
| 4540 |
미운오리스키 |
13년 전 | 1067 | |
| 4539 | 13년 전 | 1168 | ||
| 4538 | 13년 전 | 1595 | ||
| 4537 | 13년 전 | 1181 | ||
| 4536 | 13년 전 | 565 | ||
| 4535 |
스터디24 |
13년 전 | 831 | |
| 4534 |
스터디24 |
13년 전 | 982 | |
| 4533 | 13년 전 | 659 | ||
| 4532 |
soing
|
13년 전 | 7380 | |
| 4531 |
 매직크레용 |
13년 전 | 6405 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기