미채택 완료

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

2014-12-11 (목) 10:47:58 4,339

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

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

내용을

latest를 보여줄 생각입니다.

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

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

<tab_contents>가 <li>태그로 되어있어서..

latest에 출력되는 <li>목록도 같이 '숨김'처리가 되어버립니다.

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

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

Copy
<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 --> ​
Copy
;(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);​
|

답변 1개

2014-12-11 (목) 16:15:12
latest안의 ul태그를 dl 태그로 대체하세요

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