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 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4530 |
라이언31
|
13년 전 | 618 | |
| 4529 | 13년 전 | 794 | ||
| 4528 |
꼬꼬아부지
|
13년 전 | 1001 | |
| 4527 | 13년 전 | 609 | ||
| 4526 | 13년 전 | 689 | ||
| 4525 |
 똥싼너구리 |
13년 전 | 1009 | |
| 4524 | 13년 전 | 979 | ||
| 4523 | 13년 전 | 2283 | ||
| 4522 | 13년 전 | 612 | ||
| 4521 | 13년 전 | 1256 | ||
| 4520 | 13년 전 | 1549 | ||
| 4519 |
복이219
|
13년 전 | 1203 | |
| 4518 | 13년 전 | 491 | ||
| 4517 | 13년 전 | 1295 | ||
| 4516 |
아이피마스터
|
13년 전 | 551 | |
| 4515 | 13년 전 | 637 | ||
| 4514 | 13년 전 | 637 | ||
| 4513 | 13년 전 | 1067 | ||
| 4512 |
ananom
|
13년 전 | 4361 | |
| 4511 |
ananom
|
13년 전 | 1478 | |
| 4510 | 13년 전 | 1215 | ||
| 4509 | 13년 전 | 678 | ||
| 4508 | 13년 전 | 843 | ||
| 4507 | 13년 전 | 930 | ||
| 4506 | 13년 전 | 700 | ||
| 4505 | 13년 전 | 627 | ||
| 4504 | 13년 전 | 464 | ||
| 4503 | 13년 전 | 502 | ||
| 4502 |
 늘푸른세상 |
13년 전 | 1788 | |
| 4501 | 13년 전 | 1626 | ||
| 4500 |
 넓은마인드 |
13년 전 | 485 | |
| 4499 | 13년 전 | 1874 | ||
| 4498 | 13년 전 | 1151 | ||
| 4497 |
미션임파썩을
|
13년 전 | 889 | |
| 4496 | 13년 전 | 935 | ||
| 4495 |
공포의니이킥
|
13년 전 | 1105 | |
| 4494 | 13년 전 | 1970 | ||
| 4493 | 13년 전 | 1059 | ||
| 4492 | 13년 전 | 487 | ||
| 4491 |
두근두근따봉
|
13년 전 | 923 | |
| 4490 | 13년 전 | 1367 | ||
| 4489 |
jaein8060
|
13년 전 | 611 | |
| 4488 | 13년 전 | 1039 | ||
| 4487 |
ReeJang
|
13년 전 | 1817 | |
| 4486 | 13년 전 | 979 | ||
| 4485 | 13년 전 | 800 | ||
| 4484 | 13년 전 | 852 | ||
| 4483 | 13년 전 | 517 | ||
| 4482 | 13년 전 | 1177 | ||
| 4481 | 13년 전 | 1048 | ||
| 4480 |
넓은마인드 |
13년 전 | 520 | |
| 4479 | 13년 전 | 908 | ||
| 4478 | 13년 전 | 3962 | ||
| 4477 | 13년 전 | 986 | ||
| 4476 |
wangko
|
13년 전 | 2703 | |
| 4475 | 13년 전 | 924 | ||
| 4474 | 13년 전 | 956 | ||
| 4473 | 13년 전 | 757 | ||
| 4472 |
넓은마인드 |
13년 전 | 550 | |
| 4471 | 13년 전 | 1563 | ||
| 4470 | 13년 전 | 571 | ||
| 4469 | 13년 전 | 519 | ||
| 4468 | 13년 전 | 845 | ||
| 4467 | 13년 전 | 641 | ||
| 4466 | 13년 전 | 910 | ||
| 4465 | 13년 전 | 658 | ||
| 4464 | 13년 전 | 1715 | ||
| 4463 |
chongho
|
13년 전 | 2169 | |
| 4462 |
chongho
|
13년 전 | 1020 | |
| 4461 |
chongho
|
13년 전 | 1022 | |
| 4460 | 13년 전 | 751 | ||
| 4459 | 13년 전 | 2778 | ||
| 4458 | 13년 전 | 784 | ||
| 4457 | 13년 전 | 493 | ||
| 4456 | 13년 전 | 1319 | ||
| 4455 | 13년 전 | 1723 | ||
| 4454 | 13년 전 | 693 | ||
| 4453 | 13년 전 | 1249 | ||
| 4452 |
aequum
|
13년 전 | 1267 | |
| 4451 | 13년 전 | 1324 | ||
| 4450 |
도토리과자
|
13년 전 | 1423 | |
| 4449 | 13년 전 | 1078 | ||
| 4448 | 13년 전 | 8615 | ||
| 4447 | 13년 전 | 1201 | ||
| 4446 | 13년 전 | 1482 | ||
| 4445 | 13년 전 | 630 | ||
| 4444 |
넓은마인드 |
13년 전 | 581 | |
| 4443 | 13년 전 | 687 | ||
| 4442 |
Msoft
|
13년 전 | 1049 | |
| 4441 |
 매직크레용 |
13년 전 | 2098 | |
| 4440 | 13년 전 | 611 | ||
| 4439 | 13년 전 | 1652 | ||
| 4438 |
aequum
|
13년 전 | 1834 | |
| 4437 | 13년 전 | 983 | ||
| 4436 | 13년 전 | 917 | ||
| 4435 |
디귿소프트
|
13년 전 | 508 | |
| 4434 | 13년 전 | 1066 | ||
| 4433 | 13년 전 | 990 | ||
| 4432 | 13년 전 | 853 | ||
| 4431 | 13년 전 | 748 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기