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 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4430 | 13년 전 | 821 | ||
| 4429 | 13년 전 | 1148 | ||
| 4428 | 13년 전 | 1940 | ||
| 4427 | 13년 전 | 1059 | ||
| 4426 | 13년 전 | 521 | ||
| 4425 | 13년 전 | 9874 | ||
| 4424 |
 디자인하라 |
13년 전 | 839 | |
| 4423 |
 넓은마인드 |
13년 전 | 702 | |
| 4422 |
aequum
|
13년 전 | 1285 | |
| 4421 | 13년 전 | 2407 | ||
| 4420 | 13년 전 | 1204 | ||
| 4419 | 13년 전 | 889 | ||
| 4418 |
한번잘해보자
|
13년 전 | 671 | |
| 4417 | 13년 전 | 1577 | ||
| 4416 | 13년 전 | 870 | ||
| 4415 | 13년 전 | 2249 | ||
| 4414 | 13년 전 | 676 | ||
| 4413 | 13년 전 | 675 | ||
| 4412 | 13년 전 | 813 | ||
| 4411 | 13년 전 | 1436 | ||
| 4410 |
넓은마인드 |
13년 전 | 692 | |
| 4409 | 13년 전 | 2164 | ||
| 4408 |
visualp
|
13년 전 | 531 | |
| 4407 |
visualp
|
13년 전 | 3086 | |
| 4406 |
visualp
|
13년 전 | 3251 | |
| 4405 |
visualp
|
13년 전 | 3151 | |
| 4404 |
visualp
|
13년 전 | 2976 | |
| 4403 |
넓은마인드 |
13년 전 | 665 | |
| 4402 |
gender
|
13년 전 | 618 | |
| 4401 | 13년 전 | 1111 | ||
| 4400 |
aequum
|
13년 전 | 1377 | |
| 4399 | 13년 전 | 583 | ||
| 4398 | 13년 전 | 667 | ||
| 4397 |
넓은마인드 |
13년 전 | 578 | |
| 4396 |
aequum
|
13년 전 | 4657 | |
| 4395 |
넓은마인드 |
13년 전 | 546 | |
| 4394 |
aequum
|
13년 전 | 4929 | |
| 4393 |
 jakekwak |
13년 전 | 1261 | |
| 4392 | 13년 전 | 1053 | ||
| 4391 |
mirrV
|
13년 전 | 528 | |
| 4390 |
파워웹프로
|
13년 전 | 701 | |
| 4389 | 13년 전 | 1222 | ||
| 4388 |
Coding
|
13년 전 | 697 | |
| 4387 |
aequum
|
13년 전 | 1354 | |
| 4386 | 13년 전 | 867 | ||
| 4385 | 13년 전 | 722 | ||
| 4384 | 13년 전 | 785 | ||
| 4383 | 13년 전 | 2899 | ||
| 4382 | 13년 전 | 605 | ||
| 4381 | 13년 전 | 1168 | ||
| 4380 | 13년 전 | 803 | ||
| 4379 |
 cshop |
13년 전 | 746 | |
| 4378 | 13년 전 | 663 | ||
| 4377 | 13년 전 | 3298 | ||
| 4376 |
aequum
|
13년 전 | 1211 | |
| 4375 |
클로로다인
|
13년 전 | 646 | |
| 4374 |
DDFACTORY
|
13년 전 | 719 | |
| 4373 |
까탈스런ET
|
13년 전 | 705 | |
| 4372 | 13년 전 | 801 | ||
| 4371 | 13년 전 | 562 | ||
| 4370 |
 pjhsir |
13년 전 | 643 | |
| 4369 |
프리프리닷
|
13년 전 | 1300 | |
| 4368 | 13년 전 | 3164 | ||
| 4367 |
soing
|
13년 전 | 1573 | |
| 4366 |
 소울페이지 |
13년 전 | 683 | |
| 4365 |
소울페이지 |
13년 전 | 622 | |
| 4364 |
소울페이지 |
13년 전 | 756 | |
| 4363 |
소울페이지 |
13년 전 | 621 | |
| 4362 |
소울페이지 |
13년 전 | 723 | |
| 4361 |
소울페이지 |
13년 전 | 839 | |
| 4360 |
소울페이지 |
13년 전 | 649 | |
| 4359 |
소울페이지 |
13년 전 | 3123 | |
| 4358 |
소울페이지 |
13년 전 | 3038 | |
| 4357 | 13년 전 | 840 | ||
| 4356 | 13년 전 | 1338 | ||
| 4355 | 13년 전 | 965 | ||
| 4354 | 13년 전 | 814 | ||
| 4353 | 13년 전 | 3372 | ||
| 4352 | 13년 전 | 2372 | ||
| 4351 | 13년 전 | 1960 | ||
| 4350 |
jakekwak |
13년 전 | 1872 | |
| 4349 | 13년 전 | 644 | ||
| 4348 |
aequum
|
13년 전 | 1405 | |
| 4347 | 13년 전 | 655 | ||
| 4346 |
 TopSchooL |
13년 전 | 563 | |
| 4345 | 13년 전 | 593 | ||
| 4344 |
aequum
|
13년 전 | 1000 | |
| 4343 |
cshop |
13년 전 | 1036 | |
| 4342 |
aequum
|
13년 전 | 1627 | |
| 4341 | 13년 전 | 798 | ||
| 4340 |
2번호랑이
|
13년 전 | 1000 | |
| 4339 |
TopSchooL |
13년 전 | 1166 | |
| 4338 | 13년 전 | 1163 | ||
| 4337 | 13년 전 | 519 | ||
| 4336 |
aequum
|
13년 전 | 1703 | |
| 4335 | 13년 전 | 879 | ||
| 4334 | 13년 전 | 1180 | ||
| 4333 |
Sturmvogel
|
13년 전 | 958 | |
| 4332 |
aequum
|
13년 전 | 1280 | |
| 4331 |
aequum
|
13년 전 | 1392 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기