SIR
목록으로

스크립트질문좀드리겠습니다. 채택완료

초초보입니다1
프로필 보기이 회원 글보기이 회원의 댓글보기
 7년 전 조회 2,129
답변 3
목록

안녕하세요 질문좀 드리겠습니다.

탭메뉴 스크립트인데요 class="active" rel="tab2" 이부분인데요 

처음 보여지는 탭메뉴를 tab2로 지정하고싶은데 css는 바뀌는데 내용은 변경이안됩니다 ㅠ

어떻게 해야지 tab2로 먼저 나오게끔 할수있을까요 

 

Copy 
<div class="mb02">
     <h2>가장 많이 찾으시는 <span>모바일 BEST</span></h2>
      <ul class="tabs">
        <li rel="tab1">키즈/10대</li>
        <li class="active" rel="tab2">20대</li>
        <li rel="tab3">30대</li>
    </ul>
    <div class="bestMore">
    <a href="/shop/?type=1">전체보기</a>
    </div>
</div> 
<div class="tab_container">
        <div id="tab1" class="tab_content">
            <div class="mb03">
              <?php echo display_banner('10대메인추천1개', 'boxbanner.skin.php'); ?>
             </div>
            <div class="mb04">
            <ul>
             <?php echo display_banner('10대상품3개', 'boxbanner10.skin.php'); ?>
            </ul>
            </div>
        </div>
        <!-- #tab1 -->
        <div id="tab2" class="tab_content">
          <div class="mb03">
              <?php echo display_banner('20대메인추천1개', 'boxbanner.skin.php'); ?>
             </div>
            <div class="mb04">
            <ul>
             <?php echo display_banner('20대상품3개', 'boxbanner10.skin.php'); ?>
            </ul>
            </div>
        </div>
        <!-- #tab2 -->
        <div id="tab3" class="tab_content">
        <div class="mb03">
              <?php echo display_banner('30대메인추천1개', 'boxbanner.skin.php'); ?>
             </div>
            <div class="mb04">
            <ul>
             <?php echo display_banner('30대상품3개', 'boxbanner10.skin.php'); ?>
            </ul>
            </div>
        </div>
        <!-- #tab3 -->
     
</div>

 

Copy 
<script>
 $(function () {

    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active").css("color", "#000");
         $(this).addClass("active").css("color", "#fff");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn()
    });
});

</script>
#그누보드5

답변 3개

채택된 답변
+20 포인트

Copy 
<script>

 $(function () {

    $(".tab_content").hide();

    $("#tab2").show();

    $("ul.tabs li").click(function () {

        $("ul.tabs li").removeClass("active").css("color", "#000");

         $(this).addClass("active").css("color", "#fff");

        $(".tab_content").hide()

        var activeTab = $(this).attr("rel");

        $("#" + activeTab).fadeIn()

    });

});

</script>
로그인 후 평가할 수 있습니다

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

Copy 
<script>

 $(function () {

    $(".tab_content").hide();

    $("#tab2").show();

    $("ul.tabs li").click(function () {

        $("ul.tabs li").removeClass("active").css("color", "#000");

         $(this).addClass("active").css("color", "#fff");

        $(".tab_content").hide()

        var activeTab = $(this).attr("rel");

        $("#" + activeTab).fadeIn()

    });

});

</script>
로그인 후 평가할 수 있습니다

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

Copy 
$(function () {
    $(".tab_content").hide();
    //$(".tab_content:first").show();
    $(".tab_content:eq(1)").show(); //<- 이부분을 변경하세요 처음은 0 부터입니다 
    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active").css("color", "#000");
         $(this).addClass("active").css("color", "#fff");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn()
    });
});
로그인 후 평가할 수 있습니다

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

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

로그인
🐛 버그신고