테스트 사이트 - 개발 중인 베타 버전입니다
SIR

질문해도 되나요?

개발자 jquery
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 13년 전 · 1073 · 21
 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>
 $("#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");
  });
</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();

로 고쳐봤는데 안 되네요...;;
Americano
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
var tabname = $(this).attr('title');
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
감사합니다!
Americano
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
수정하셨으면
tabname = tabname.replace(' ','');
이부분은 필요없겠네요~
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
네 지우고 쓰고 있습니다 ^^
Terrorboy
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
소스에 요지는...
탭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>
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
오호 이런 방법도 있군요.
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
이리저리 해보다 보니 li 에 class 로 스타일을 먹여줘야 할 때가 문제네요.
<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>
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
display:none 을 일괄적용하고 싶어서 스타일을 적용하면요? ㅎㅎㅎ;;
관리자
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
display:none 하고는 관련이 없을텐데요.
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' 으로 읽어오니까 아이디를 저렇게 해야 하잖아요 ㅋㅋㅋ
관리자
프로필 보기이 회원 글보기이 회원의 댓글보기
 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>
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
오홍! 일단 한번 해보겠습니다. ㅎ
MH코리아
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
역시;;;여기 jQuery 역시;;웹고수들은 다여기모여있군 흠;; 난 저게 먼지모르는데;;

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

배경음악 랜덤 재생 하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

랜덤으로 이미지 출력 되기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

사용자 해상도 알아내기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

붙여넣기 금지하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

대소문자 데이터 조회하기

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

퇴장시 팝업창 한번한 띄우기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

www 주소 리다이렉션 시켜주기 입니다.

#개발자 #php
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

신문 기사를 긁어오기 입니다.

#개발자 #php
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

시도, 구군, 동 주소 select

#개발자 #javascript
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

커리로 DB 테이블 명세서 출력하기

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

rss 읽어오기 입니다.

#개발자 #php
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

자바스크립트로 Ajax 효과내기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

css 마우스 오버, 테두리

#개발자 #기타
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

키보드,마우스 등 불펌방지 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

해상도에 따라 서로 다른 페이지로 접속 하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

특정페이지에서 자동으로 새로고침 하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

마우스 오버시 이미지 안쪽에 테두리주기

#개발자 #javascript
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

git 사용메뉴얼 보면 깝깝 하네요

#개발자 #node.js
아아길이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

그림자가 있는 글자 표현하기 입니다.

#개발자 #php
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

css로 테이블 만들기 입니다.

#개발자 #php
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

간결한 레이어 메뉴 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전