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

제이쿼리 탭 메뉴 수정좀 부탁드립니다. 채택완료

마인드핵 10년 전 조회 4,108

안녕하세요 책에서 공부하면서 탭롤링 응용을 하고 있습니다.

 

ul 태그를 이용한 탭 롤링인데.

내용을

latest를 보여줄 생각입니다.

역시나 latest도 ul로 되어있습니다.

 

아래 코드를 보시면 알겠지만

  • 태그로 되어있어서..

    latest에 출력되는

  • 목록도 같이 '숨김'처리가 되어버립니다.

     

    j쿼리 쪽에 문제인거 같은데.. 어떻게 하면 될까요..

    2일동안 진행을 못하고 있어요 ㅠㅠ

     

     

    <div id="tab_design">
      <a class="sound_only" href="#contents">탭 메뉴 건너뛰기</a>
      <nav class="tab_menu clearfix">
       <ul>
        <li>
         <a href="#clock">
          S장터
         </a>
        </li>
        <li>
         <a href="#weather">
          Q&A
         </a>
        </li>
        <li>
         <a href="#calender">
          S파티모집
         </a>
        </li>
        <li>
         <a href="#chart">
          S길드홍보
         </a>
        </li>
       </ul>
      </nav><!-- e: .tab_menu -->
      <div class="tab_contents">
       <ul>
        <li id="clock">
         <div>
         <?php echo latest("06", "table_08", 7, 25);?>
         </div>
        </li>
        <li id="weather">
         <div>
         <?php echo latest("06", "table_08", 7, 25);?>
         </div>
        </li>
        <li id="calender">
         <div>
         <?php echo latest("06", "table_08", 7, 25);?>
         </div> 
        </li>
        <li id="chart">
         <div>
         <?php echo latest("06", "table_08", 7, 25);?>
         </div>
        </li>
       </ul>
      </div><!-- e: .tab_contents -->
     </div><!-- e: #tab_design --> ​</p><p>

    </p><p>;(function($) { 
     $.fn.tabs = function(options) {
      
      // 옵션 설정.
      options = $.extend({
       start_index: 1,
       random: false,
       transitions_time: 400
      }, options);
      
      // jQuery 체인.
      return this.each(function() {
       
       // 대상 참조.
       var $this = $(this),
        $menu = $this.find('.tab_menu'),
        $menu_li = $menu.find('li'),
        $menu_a = $menu_li.find('a'),
        $contents = $this.find('.tab_contents'),
        support_features = !Modernizr.opacity || !Modernizr.csstransitions;
        
       // 랜덤 인덱스 설정. 
       if(options.random) 
        options.start_index = Math.floor(Math.random() * $menu_li.length + 1);
       
       // 플러그인 대상 객체에 클래스 부여 
       $this.addClass('tabs');
       
       // 처음 보여질 탭 설정.
       $menu.add($contents)
        .find('li:nth-child(' + options.start_index + ')').addClass('active');
       
       // opacity 미지원 브라우저에 적용.
       if(support_features) {
        
        $menu_li.find('img').animate({'opacity': 0}, 10, function() {
         $menu_li.filter('.active').find('img').animate({'opacity': 1}, 10); 
        });
        
        $menu_a
         .mouseover(function() {
          $(this)
           .stop().animate({'padding-left': '2.2em', 'padding-right': '0.8em'}, 200)
           .find('img').stop().animate({'opacity': 1, 'left': 6}, 200);
         })
         .mouseout(function() {
          if($(this).parent().hasClass('active')) return false;
          $(this)
           .stop().animate({'padding-left': '1.5em', 'padding-right': '1.5em'}, 200)
           .find('img').stop().animate({'opacity':0, 'left': 16}, 200);
         });
       };
        
       // $menu 내부의 a 클릭 시 이벤트 핸들링
       $menu_a.click(function(e) {
       
        // 대상 참조.
        var $this = $(this),
         target = $this.attr('href');
         
        // 활성화된 a 클릭 시, 작동하지 않도록 설정.
         if($this.parent().hasClass('active')) return;
         
         // $menu_link에서 active 클래스 제거
        $menu_li.removeClass('active');
        
        // 클릭한 a의 부모 li에 active 클래스 추가
        $this.parent().addClass('active');
        
        // opacity 미지원 브라우저에 적용. 
        if(support_features) {
         $menu_li.not('.active').find('a').mouseout();
         $(this).mouseover();
        };
        
        // 부드러운 장면전환.
        $contents.find('li')
         .fadeTo(options.transition_time, 0, function() {
          $(this).removeClass('active')
           .filter(target).addClass('active').fadeTo(options.transition_time, 1);
        });
       
        // 브라우저 링크 기본 동작 차단
        e.preventDefault();
        
       });
       
      }); // end: return
     }; //end: plug-in
    })(jQuery);​</p><p>

     

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

    답변 1개

    latest안의 ul태그를 dl 태그로 대체하세요
    로그인 후 평가할 수 있습니다

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

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

    로그인