탭 메뉴 롤링 질문입니다 ㅠ
마주닝
3년 전
조회 3,694
쇼핑몰 메인 화면에서 탭메뉴로 카테고리 별 상품을 보여주고 있는데
처음 기획단계에서 자동 롤링 기능이 없어서 해당 사항을 고려하지 않고 짰는데
갑자기 자동 롤링이 필요하다고 하네요..;;
저러 소스들을 찾아보고 적용해보려고 하였는데 어떤 이유인지 잘되지 않아서
지금 사용하는 소스에 자동 롤링을 어떻게 추가하면 될지 질문 드리고 싶습니다 ㅠㅠ
</p>
<p><div id="main_tab">
<ul class="tab_tit">
<li><button type="button" rel="#tab_1" class="selected">시계</button></li>
<li><button type="button" rel="#tab_2">가방</button></li>
<li><button type="button" rel="#tab_3">지갑</button></li>
<li><button type="button" rel="#tab_4">신발</button></li>
</ul></p>
<p> <ul class="tab_con">
<li id="tab_1"><div>내용</div></li></p>
<p> <li id="tab_2"><div>내용</div></li></p>
<p> <li id="tab_3"><div>내용</div></li></p>
<p> <li id="tab_4"><div>내용</div></li></p>
<p> </ul>
</div></p>
<p><script>
$(function (){
$(".tab_con>li").hide();
$(".tab_con>li:first").show();
$(".tab_tit li button").click(function(){
$(".tab_tit li button").removeClass("selected");
$(this).addClass("selected");
$(".tab_con>li").hide();
$($(this).attr("rel")).show();
});
});</p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
3년 전
var move; move = setInterval(function(){ $(".tab_tit li").removeClass("selected"); $(".tab_tit li").eq(current).addClass("selected"); $(".tab_con>li").hide(); $(".tab_con>li").eq(current).show(); current++; if(current==$(".tab_tit li").size()){current=0}; },500);
이런식으로 롤링시키시고~! 클릭후에는 인덱스번호를 치환받으시는걸로 작성하시면 될거같네요 ~
* 저는 select 클래스를 li 로 옮겨서 작업하였습니다~
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인