채택완료

간단한 탭메뉴 좀



탭 따라서 하단 내용이 다르게

쉬운 소스 없을까요.....
|

답변 1개

채택된 답변
+20 포인트

Copy
<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>
 

답변을 작성하려면 로그인이 필요합니다.