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 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8130 | 9년 전 | 467 | ||
| 8129 |
 Angelos |
9년 전 | 626 | |
| 8128 | 9년 전 | 502 | ||
| 8127 |
Angelos |
9년 전 | 563 | |
| 8126 | 9년 전 | 492 | ||
| 8125 | 9년 전 | 749 | ||
| 8124 |
Angelos |
9년 전 | 480 | |
| 8123 | 9년 전 | 471 | ||
| 8122 | 9년 전 | 409 | ||
| 8121 | 9년 전 | 515 | ||
| 8120 | 9년 전 | 445 | ||
| 8119 | 9년 전 | 524 | ||
| 8118 |
Angelos |
9년 전 | 613 | |
| 8117 |
 뜨거운형제들 |
9년 전 | 383 | |
| 8116 |
PASKRAN
|
9년 전 | 451 | |
| 8115 | 9년 전 | 445 | ||
| 8114 |
kiplayer
|
9년 전 | 585 | |
| 8113 | 9년 전 | 420 | ||
| 8112 |
Angelos |
9년 전 | 535 | |
| 8111 | 9년 전 | 389 | ||
| 8110 | 9년 전 | 427 | ||
| 8109 | 9년 전 | 336 | ||
| 8108 |
Angelos |
9년 전 | 526 | |
| 8107 |
Angelos |
9년 전 | 415 | |
| 8106 |
Angelos |
9년 전 | 411 | |
| 8105 | 9년 전 | 456 | ||
| 8104 |
Angelos |
9년 전 | 410 | |
| 8103 |
Angelos |
9년 전 | 410 | |
| 8102 |
Angelos |
9년 전 | 368 | |
| 8101 |
snshero
|
9년 전 | 755 | |
| 8100 | 9년 전 | 819 | ||
| 8099 | 9년 전 | 784 | ||
| 8098 | 9년 전 | 694 | ||
| 8097 | 9년 전 | 485 | ||
| 8096 | 9년 전 | 685 | ||
| 8095 | 9년 전 | 809 | ||
| 8094 | 9년 전 | 485 | ||
| 8093 | 9년 전 | 779 | ||
| 8092 | 9년 전 | 739 | ||
| 8091 | 9년 전 | 1129 | ||
| 8090 | 9년 전 | 740 | ||
| 8089 | 9년 전 | 943 | ||
| 8088 | 9년 전 | 617 | ||
| 8087 | 9년 전 | 727 | ||
| 8086 | 9년 전 | 494 | ||
| 8085 | 9년 전 | 461 | ||
| 8084 | 9년 전 | 601 | ||
| 8083 | 9년 전 | 570 | ||
| 8082 | 9년 전 | 740 | ||
| 8081 | 9년 전 | 451 | ||
| 8080 | 9년 전 | 536 | ||
| 8079 | 9년 전 | 492 | ||
| 8078 | 9년 전 | 423 | ||
| 8077 | 9년 전 | 500 | ||
| 8076 | 9년 전 | 384 | ||
| 8075 | 9년 전 | 402 | ||
| 8074 | 9년 전 | 370 | ||
| 8073 | 9년 전 | 420 | ||
| 8072 | 9년 전 | 408 | ||
| 8071 |
o1o111
|
9년 전 | 859 | |
| 8070 | 9년 전 | 378 | ||
| 8069 | 9년 전 | 306 | ||
| 8068 | 9년 전 | 570 | ||
| 8067 | 9년 전 | 377 | ||
| 8066 | 9년 전 | 405 | ||
| 8065 | 9년 전 | 353 | ||
| 8064 | 9년 전 | 337 | ||
| 8063 | 9년 전 | 300 | ||
| 8062 | 9년 전 | 287 | ||
| 8061 | 9년 전 | 334 | ||
| 8060 | 9년 전 | 354 | ||
| 8059 | 9년 전 | 293 | ||
| 8058 | 9년 전 | 228 | ||
| 8057 | 9년 전 | 358 | ||
| 8056 | 9년 전 | 286 | ||
| 8055 | 9년 전 | 318 | ||
| 8054 | 9년 전 | 333 | ||
| 8053 | 9년 전 | 377 | ||
| 8052 | 9년 전 | 261 | ||
| 8051 | 9년 전 | 305 | ||
| 8050 | 9년 전 | 371 | ||
| 8049 | 9년 전 | 297 | ||
| 8048 | 9년 전 | 406 | ||
| 8047 | 9년 전 | 336 | ||
| 8046 | 9년 전 | 265 | ||
| 8045 | 9년 전 | 239 | ||
| 8044 | 9년 전 | 303 | ||
| 8043 | 9년 전 | 249 | ||
| 8042 | 9년 전 | 269 | ||
| 8041 | 9년 전 | 310 | ||
| 8040 | 9년 전 | 240 | ||
| 8039 | 9년 전 | 299 | ||
| 8038 | 9년 전 | 251 | ||
| 8037 | 9년 전 | 368 | ||
| 8036 | 9년 전 | 453 | ||
| 8035 | 9년 전 | 406 | ||
| 8034 | 9년 전 | 368 | ||
| 8033 | 9년 전 | 325 | ||
| 8032 | 9년 전 | 382 | ||
| 8031 | 9년 전 | 314 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기