안녕하세요 책에서 공부하면서 탭롤링 응용을 하고 있습니다.
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 태그로 대체하세요
답변을 작성하려면 로그인이 필요합니다.