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 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7830 | 10년 전 | 461 | ||
| 7829 |
 gilynh |
10년 전 | 648 | |
| 7828 | 10년 전 | 572 | ||
| 7827 | 10년 전 | 474 | ||
| 7826 | 10년 전 | 496 | ||
| 7825 | 10년 전 | 527 | ||
| 7824 | 10년 전 | 487 | ||
| 7823 | 10년 전 | 429 | ||
| 7822 | 10년 전 | 403 | ||
| 7821 | 10년 전 | 347 | ||
| 7820 | 10년 전 | 370 | ||
| 7819 |
 ABC디자인 |
10년 전 | 767 | |
| 7818 | 10년 전 | 428 | ||
| 7817 | 10년 전 | 606 | ||
| 7816 | 10년 전 | 445 | ||
| 7815 | 10년 전 | 638 | ||
| 7814 | 10년 전 | 478 | ||
| 7813 | 10년 전 | 434 | ||
| 7812 | 10년 전 | 442 | ||
| 7811 | 10년 전 | 419 | ||
| 7810 | 10년 전 | 622 | ||
| 7809 | 10년 전 | 553 | ||
| 7808 | 10년 전 | 433 | ||
| 7807 | 10년 전 | 442 | ||
| 7806 |
프로그래머7
|
10년 전 | 1364 | |
| 7805 | 10년 전 | 1308 | ||
| 7804 |
zahir1312
|
10년 전 | 805 | |
| 7803 |
ABC디자인 |
10년 전 | 1405 | |
| 7802 | 10년 전 | 506 | ||
| 7801 | 10년 전 | 884 | ||
| 7800 | 10년 전 | 1111 | ||
| 7799 | 10년 전 | 594 | ||
| 7798 | 10년 전 | 541 | ||
| 7797 | 10년 전 | 561 | ||
| 7796 | 10년 전 | 397 | ||
| 7795 | 10년 전 | 549 | ||
| 7794 | 10년 전 | 591 | ||
| 7793 | 10년 전 | 1089 | ||
| 7792 | 10년 전 | 515 | ||
| 7791 | 10년 전 | 609 | ||
| 7790 | 10년 전 | 534 | ||
| 7789 |
fbastore
|
10년 전 | 1485 | |
| 7788 | 10년 전 | 591 | ||
| 7787 | 10년 전 | 448 | ||
| 7786 | 10년 전 | 654 | ||
| 7785 | 10년 전 | 627 | ||
| 7784 | 10년 전 | 691 | ||
| 7783 | 10년 전 | 511 | ||
| 7782 | 10년 전 | 534 | ||
| 7781 | 10년 전 | 938 | ||
| 7780 | 10년 전 | 846 | ||
| 7779 | 10년 전 | 799 | ||
| 7778 | 10년 전 | 392 | ||
| 7777 | 10년 전 | 505 | ||
| 7776 | 10년 전 | 500 | ||
| 7775 | 10년 전 | 435 | ||
| 7774 | 10년 전 | 647 | ||
| 7773 | 10년 전 | 403 | ||
| 7772 | 10년 전 | 777 | ||
| 7771 | 10년 전 | 436 | ||
| 7770 | 10년 전 | 674 | ||
| 7769 | 10년 전 | 434 | ||
| 7768 | 10년 전 | 655 | ||
| 7767 | 10년 전 | 1207 | ||
| 7766 | 10년 전 | 536 | ||
| 7765 | 10년 전 | 594 | ||
| 7764 |
잘살아보자
|
10년 전 | 455 | |
| 7763 |
 foxrain |
10년 전 | 1502 | |
| 7762 |
Tosea
|
10년 전 | 1088 | |
| 7761 | 10년 전 | 692 | ||
| 7760 |
잘살아보자
|
10년 전 | 765 | |
| 7759 |
잘살아보자
|
10년 전 | 602 | |
| 7758 |
잘살아보자
|
10년 전 | 660 | |
| 7757 | 10년 전 | 1287 | ||
| 7756 |
ITBANK
|
10년 전 | 1290 | |
| 7755 | 10년 전 | 1945 | ||
| 7754 | 10년 전 | 1103 | ||
| 7753 | 10년 전 | 922 | ||
| 7752 | 10년 전 | 1423 | ||
| 7751 |
잘살아보자
|
10년 전 | 581 | |
| 7750 |
잘살아보자
|
10년 전 | 510 | |
| 7749 |
잘살아보자
|
10년 전 | 534 | |
| 7748 |
잘살아보자
|
10년 전 | 561 | |
| 7747 |
잘살아보자
|
10년 전 | 639 | |
| 7746 |
잘살아보자
|
10년 전 | 701 | |
| 7745 |
잘살아보자
|
10년 전 | 949 | |
| 7744 |
잘살아보자
|
10년 전 | 441 | |
| 7743 | 10년 전 | 972 | ||
| 7742 |
starbros
|
10년 전 | 865 | |
| 7741 |
잘살아보자
|
10년 전 | 708 | |
| 7740 |
잘살아보자
|
10년 전 | 597 | |
| 7739 |
잘살아보자
|
10년 전 | 487 | |
| 7738 |
잘살아보자
|
10년 전 | 564 | |
| 7737 |
잘살아보자
|
10년 전 | 542 | |
| 7736 |
잘살아보자
|
10년 전 | 562 | |
| 7735 |
잘살아보자
|
10년 전 | 898 | |
| 7734 |
잘살아보자
|
10년 전 | 454 | |
| 7733 |
잘살아보자
|
10년 전 | 565 | |
| 7732 |
잘살아보자
|
10년 전 | 731 | |
| 7731 |
잘살아보자
|
10년 전 | 655 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기