질문해도 되나요? > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.
출석체크 포인트가위바위보 포인트야구게임

질문해도 되나요? 정보

jQuery 질문해도 되나요?

본문

 jQuery 관련이라 질문을 올려보는데 혹여 성격에 안 맞는다면 바로 삭제하겠습니다. 죄송합니다.
아샬님이 올리신 탭메뉴 소스가 있었네요.
 
<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 값에 한글을 넣어도 될까요?
추천
0
  • 복사

댓글 21개

지운아빠 자기소개 아이디로 검색 회원게시물 11.12.02 11:49:07
<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();

로 고쳐봤는데 안 되네요...;;
관리자 자기소개 아이디로 검색 회원게시물 11.12.02 12:09:45
저는 이렇게 한번 해봤습니다.

<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>
관리자 자기소개 아이디로 검색 회원게시물 11.12.02 15:11:39
이럼 되죠?

<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>
지운아빠 자기소개 아이디로 검색 회원게시물 11.12.02 17:44:03
<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' 으로 읽어오니까 아이디를 저렇게 해야 하잖아요 ㅋㅋㅋ
관리자 자기소개 아이디로 검색 회원게시물 11.12.03 09:35:44
완전 정복

<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>
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로