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 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3830 | 14년 전 | 933 | ||
| 3829 | 14년 전 | 1680 | ||
| 3828 | 14년 전 | 957 | ||
| 3827 |
방황하는중년
|
14년 전 | 908 | |
| 3826 |
 Terrorboy |
14년 전 | 1638 | |
| 3825 | 14년 전 | 878 | ||
| 3824 | 14년 전 | 724 | ||
| 3823 | 14년 전 | 740 | ||
| 3822 |
level999
|
14년 전 | 832 | |
| 3821 | 14년 전 | 1017 | ||
| 3820 |
TzM위드컴
|
14년 전 | 936 | |
| 3819 | 14년 전 | 991 | ||
| 3818 |
base64
|
14년 전 | 1102 | |
| 3817 |
base64
|
14년 전 | 965 | |
| 3816 | 14년 전 | 2240 | ||
| 3815 | 14년 전 | 1868 | ||
| 3814 |
 연후하은아빠 |
14년 전 | 2535 | |
| 3813 | 14년 전 | 505 | ||
| 3812 | 14년 전 | 809 | ||
| 3811 | 14년 전 | 1068 | ||
| 3810 | 14년 전 | 671 | ||
| 3809 |
스님꼬신수녀
|
14년 전 | 657 | |
| 3808 | 14년 전 | 1459 | ||
| 3807 | 14년 전 | 1273 | ||
| 3806 | 14년 전 | 2370 | ||
| 3805 | 14년 전 | 1265 | ||
| 3804 | 14년 전 | 852 | ||
| 3803 | 14년 전 | 3371 | ||
| 3802 | 14년 전 | 1592 | ||
| 3801 | 14년 전 | 1006 | ||
| 3800 | 14년 전 | 1359 | ||
| 3799 | 14년 전 | 718 | ||
| 3798 |
커피는막심
|
14년 전 | 1842 | |
| 3797 | 14년 전 | 775 | ||
| 3796 | 14년 전 | 1206 | ||
| 3795 | 14년 전 | 713 | ||
| 3794 |
방황하는중년
|
14년 전 | 1248 | |
| 3793 | 14년 전 | 1485 | ||
| 3792 | 14년 전 | 999 | ||
| 3791 | 14년 전 | 791 | ||
| 3790 | 14년 전 | 1008 | ||
| 3789 | 14년 전 | 935 | ||
| 3788 | 14년 전 | 1954 | ||
| 3787 | 14년 전 | 1118 | ||
| 3786 | 14년 전 | 814 | ||
| 3785 | 14년 전 | 711 | ||
| 3784 | 14년 전 | 1325 | ||
| 3783 | 14년 전 | 2618 | ||
| 3782 | 14년 전 | 707 | ||
| 3781 |
 날라리개발자 |
14년 전 | 2545 | |
| 3780 |
헬프데스크
|
14년 전 | 1664 | |
| 3779 |
방황하는중년
|
14년 전 | 900 | |
| 3778 |
날라리개발자 |
14년 전 | 1103 | |
| 3777 |
날라리개발자 |
14년 전 | 1014 | |
| 3776 |
스누피사랑
|
14년 전 | 995 | |
| 3775 |
silver31
|
14년 전 | 504 | |
| 3774 |
 TopSchooL |
14년 전 | 716 | |
| 3773 | 14년 전 | 814 | ||
| 3772 |
날라리개발자 |
14년 전 | 1175 | |
| 3771 | 14년 전 | 872 | ||
| 3770 | 14년 전 | 1228 | ||
| 3769 | 14년 전 | 1010 | ||
| 3768 |
Dokjin
|
14년 전 | 1111 | |
| 3767 |
Dokjin
|
14년 전 | 713 | |
| 3766 | 14년 전 | 1024 | ||
| 3765 |
날라리개발자 |
14년 전 | 922 | |
| 3764 | 14년 전 | 806 | ||
| 3763 | 14년 전 | 692 | ||
| 3762 | 14년 전 | 1173 | ||
| 3761 |
쉽다zzz
|
14년 전 | 1582 | |
| 3760 |
gtm100
|
14년 전 | 940 | |
| 3759 |
원시인교주
|
14년 전 | 781 | |
| 3758 | 14년 전 | 3318 | ||
| 3757 | 14년 전 | 847 | ||
| 3756 | 14년 전 | 735 | ||
| 3755 | 14년 전 | 2132 | ||
| 3754 | 14년 전 | 1515 | ||
| 3753 | 14년 전 | 2028 | ||
| 3752 | 14년 전 | 596 | ||
| 3751 | 14년 전 | 856 | ||
| 3750 |
방황하는중년
|
14년 전 | 716 | |
| 3749 |
hopeone
|
14년 전 | 549 | |
| 3748 | 14년 전 | 636 | ||
| 3747 | 14년 전 | 759 | ||
| 3746 | 14년 전 | 1514 | ||
| 3745 | 14년 전 | 872 | ||
| 3744 | 14년 전 | 911 | ||
| 3743 | 14년 전 | 544 | ||
| 3742 | 14년 전 | 1078 | ||
| 3741 | 14년 전 | 1666 | ||
| 3740 |
매너천사12
|
14년 전 | 1049 | |
| 3739 |
SGFlash
|
14년 전 | 1397 | |
| 3738 |
C2HGroup
|
14년 전 | 916 | |
| 3737 | 14년 전 | 1049 | ||
| 3736 | 14년 전 | 807 | ||
| 3735 | 14년 전 | 1117 | ||
| 3734 | 14년 전 | 1006 | ||
| 3733 | 14년 전 | 419 | ||
| 3732 | 14년 전 | 560 | ||
| 3731 | 14년 전 | 641 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기