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
13년 전
앵커에 title을 넣은 후 title의 값을 긁어오면 되지않나요?
13년 전
<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
13년 전
var tabname = $(this).attr('title');
13년 전
감사합니다!
Americano
13년 전
수정하셨으면
tabname = tabname.replace(' ','');
이부분은 필요없겠네요~
tabname = tabname.replace(' ','');
이부분은 필요없겠네요~
13년 전
네 지우고 쓰고 있습니다 ^^
Terrorboy
13년 전
소스에 요지는...
탭123중 하나를 클릭하면 그거에 맞게 텍스트가 출력되면되는건가요?
탭123중 하나를 클릭하면 그거에 맞게 텍스트가 출력되면되는건가요?
Terrorboy
13년 전
답변이 나왔네..
13년 전
저는 이렇게 한번 해봤습니다.
<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>
13년 전
오호 이런 방법도 있군요.
13년 전
이리저리 해보다 보니 li 에 class 로 스타일을 먹여줘야 할 때가 문제네요.
<li class="tab1 style">~</li>
<li class="tab1 style">~</li>
13년 전
이럼 되죠?
<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>
13년 전
display:none 을 일괄적용하고 싶어서 스타일을 적용하면요? ㅎㅎㅎ;;
13년 전
display:none 하고는 관련이 없을텐데요.
next("div") 니까요.
next("div") 니까요.
13년 전
<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' 으로 읽어오니까 아이디를 저렇게 해야 하잖아요 ㅋㅋㅋ
13년 전
음~ 몰라욧!!!
13년 전
'ㅛ'
13년 전
완전 정복
<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>
13년 전
오홍! 일단 한번 해보겠습니다. ㅎ
13년 전
!
MH코리아
13년 전
역시;;;여기 jQuery 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3930 | 14년 전 | 1351 | ||
| 3929 |
방황하는중년
|
14년 전 | 522 | |
| 3928 | 14년 전 | 635 | ||
| 3927 | 14년 전 | 679 | ||
| 3926 |
Lemios
|
14년 전 | 708 | |
| 3925 | 14년 전 | 982 | ||
| 3924 |
 TopSchooL |
14년 전 | 1026 | |
| 3923 | 14년 전 | 1603 | ||
| 3922 | 14년 전 | 625 | ||
| 3921 |
피디인사이드
|
14년 전 | 1076 | |
| 3920 |
wgarlic
|
14년 전 | 2866 | |
| 3919 |
또치2009
|
14년 전 | 786 | |
| 3918 | 14년 전 | 742 | ||
| 3917 |
 KoreaCpt |
14년 전 | 1178 | |
| 3916 | 14년 전 | 1173 | ||
| 3915 | 14년 전 | 2016 | ||
| 3914 | 14년 전 | 1227 | ||
| 3913 | 14년 전 | 596 | ||
| 3912 | 14년 전 | 544 | ||
| 3911 | 14년 전 | 446 | ||
| 3910 | 14년 전 | 670 | ||
| 3909 | 14년 전 | 2180 | ||
| 3908 | 14년 전 | 618 | ||
| 3907 | 14년 전 | 634 | ||
| 3906 | 14년 전 | 725 | ||
| 3905 | 14년 전 | 931 | ||
| 3904 |
후라보노보노
|
14년 전 | 574 | |
| 3903 | 14년 전 | 861 | ||
| 3902 | 14년 전 | 1424 | ||
| 3901 |
fstjang
|
14년 전 | 654 | |
| 3900 | 14년 전 | 964 | ||
| 3899 |
 나스디자인 |
14년 전 | 433 | |
| 3898 | 14년 전 | 499 | ||
| 3897 | 14년 전 | 976 | ||
| 3896 | 14년 전 | 1323 | ||
| 3895 | 14년 전 | 1393 | ||
| 3894 | 14년 전 | 865 | ||
| 3893 | 14년 전 | 792 | ||
| 3892 |
 날라리개발자 |
14년 전 | 1328 | |
| 3891 | 14년 전 | 851 | ||
| 3890 | 14년 전 | 3948 | ||
| 3889 | 14년 전 | 1872 | ||
| 3888 | 14년 전 | 674 | ||
| 3887 | 14년 전 | 592 | ||
| 3886 | 14년 전 | 3537 | ||
| 3885 |
후라보노보노
|
14년 전 | 4222 | |
| 3884 | 14년 전 | 961 | ||
| 3883 | 14년 전 | 1156 | ||
| 3882 | 14년 전 | 4395 | ||
| 3881 |
minini
|
14년 전 | 1200 | |
| 3880 | 14년 전 | 988 | ||
| 3879 | 14년 전 | 736 | ||
| 3878 | 14년 전 | 754 | ||
| 3877 |
내꿈은대통령
|
14년 전 | 940 | |
| 3876 | 14년 전 | 875 | ||
| 3875 | 14년 전 | 1025 | ||
| 3874 | 14년 전 | 899 | ||
| 3873 | 14년 전 | 1322 | ||
| 3872 |
뜨드미지근
|
14년 전 | 665 | |
| 3871 |
SW커뮤니케이션
|
14년 전 | 526 | |
| 3870 |
방황하는중년
|
14년 전 | 554 | |
| 3869 | 14년 전 | 700 | ||
| 3868 | 14년 전 | 1167 | ||
| 3867 |
방황하는중년
|
14년 전 | 806 | |
| 3866 |
웹스커뮤니티
|
14년 전 | 1338 | |
| 3865 | 14년 전 | 1099 | ||
| 3864 |
 Terrorboy |
14년 전 | 1075 | |
| 3863 | 14년 전 | 1042 | ||
| 3862 |
 비주얼브릭스 |
14년 전 | 1913 | |
| 3861 |
비주얼브릭스 |
14년 전 | 3236 | |
| 3860 | 14년 전 | 1445 | ||
| 3859 | 14년 전 | 2380 | ||
| 3858 |
웹스커뮤니티
|
14년 전 | 1887 | |
| 3857 | 14년 전 | 1768 | ||
| 3856 |
크라잉감튀
|
14년 전 | 944 | |
| 3855 |
techer
|
14년 전 | 484 | |
| 3854 |
techer
|
14년 전 | 766 | |
| 3853 |
techer
|
14년 전 | 930 | |
| 3852 |
디자이너몽
|
14년 전 | 1642 | |
| 3851 | 14년 전 | 1697 | ||
| 3850 | 14년 전 | 1134 | ||
| 3849 | 14년 전 | 782 | ||
| 3848 | 14년 전 | 1003 | ||
| 3847 | 14년 전 | 1032 | ||
| 3846 | 14년 전 | 1043 | ||
| 3845 | 14년 전 | 578 | ||
| 3844 |
풍객리무진짱
|
14년 전 | 652 | |
| 3843 | 14년 전 | 765 | ||
| 3842 | 14년 전 | 1697 | ||
| 3841 | 14년 전 | 902 | ||
| 3840 | 14년 전 | 847 | ||
| 3839 | 14년 전 | 1137 | ||
| 3838 |
xkingcode
|
14년 전 | 750 | |
| 3837 | 14년 전 | 905 | ||
| 3836 | 14년 전 | 847 | ||
| 3835 |
temptiger
|
14년 전 | 1135 | |
| 3834 | 14년 전 | 674 | ||
| 3833 | 14년 전 | 678 | ||
| 3832 | 14년 전 | 610 | ||
| 3831 | 14년 전 | 719 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기