간단한 탭메뉴 좀

간단한 탭메뉴 좀

QA

간단한 탭메뉴 좀

본문


탭 따라서 하단 내용이 다르게
쉬운 소스 없을까요.....

이 질문에 댓글 쓰기 :

답변 1

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
 
                <div class="brandShop">
                    <h2>탭메뉴</h2>
                    <ul>
                        <li id="brand_tab1" class="port_back">탭1</li>
                        <li id="brand_tab2">탭2</li>
                        <li id="brand_tab3">탭3</li>
                    </ul>
                    <div class="rf tab_sub1">
                        탭1 내용
                    </div>
                    <div class="rm tab_sub2">
                        탭2 내용
                    </div>
                    <div class="rm tab_sub3">
                        탭3 내용
                    </div>
                </div>
 
 
<script type="text/javascript">
$(document).ready(function() {
 
$("#brand_tab1").click(function() {
    $(".tab_sub1").show();
    $(".tab_sub2,.tab_sub3").hide();
     $("#brand_tab1").addClass("port_back");
     $("#brand_tab2,#brand_tab3").removeClass("port_back");
 });
 $("#brand_tab2").click(function() {
     $(".tab_sub2").show();
     $(".tab_sub1,.tab_sub3").hide();
     $("#tab_menu2").addClass("port_back");
     $("#brand_tab1,#brand_tab3").removeClass("port_back");
  });
  $("#brand_tab3").click(function() {
      $(".tab_sub3").show();
      $(".tab_sub1,.tab_sub2").hide();
      $("#brand_tab3").addClass("port_back");
      $("#brand_tab1,#brand_tab2").removeClass("port_back");
  });
});
 
</script>
 

답변을 작성하시기 전에 로그인 해주세요.
전체 95
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT