자바스크립트 질문

자바스크립트 질문

QA

자바스크립트 질문

본문

안녕하세요.

아래처럼 클릭 하면 탭이 넘어가는 소스를 구현중인데요

2초 뒤에 탭이 자동으로 바뀌게끔 하고 싶은데

자바스크립트쪽에서...

통 먹히지를 않네요.;;

 

염치 무릅쓰고 질문 드립니다. 도와주십시오 ㅠ

CSS부분은 뺐습니다.

 

 

 



  <script>
  $(function () {
   $(".tab_content").hide();
   $(".tab_content:first").show();
   $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active").css("color", "#666");
    $(this).addClass("active").css("color", "#000");
    $(".tab_content").hide()
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn()
   });
  });
  setTimeout(activeTab, 2000);
  </script>
  <div>
   <ul class="tabs">
    <li class="active" rel="tab1">test1</li>
    <li rel="tab2">test2</li>
    <li rel="tab3">test3</li>
    <li rel="tab4">test4</li>
   </ul>
   <div>
   
    <div id="tab1" class="tab_content">
     test1
    </div>
  
    <div id="tab2" class="tab_content">
     test2
    </div>
    <div id="tab3" class="tab_content">
     test3
    </div>
    <div id="tab4" class="tab_content">
     test4
    </div>
   </div>
  </div>

이 질문에 댓글 쓰기 :

답변 4


  <script>
  $(function () {
   $(".tab_content").hide();
   $(".tab_content:first").show();
   $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active").css("color", "#666");
    $(this).addClass("active").css("color", "#000");
    $(".tab_content").hide()
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn()
   });
   var total = $("ul.tabs li").length; 
   setInterval(function(){
       var active=false;
       $("ul.tabs li").each(function(index){
               if(active){
                   $(this).click();
                   active=false;
                   return;
            }
            if($(this).attr("class")=="active"){
                if(index+1 == total){
                    active=false;
                    $("ul.tabs li").first().click();
                }else{
                    active=true;
                }
            }
            
        });
    }, 2000);
  });
  </script>

 

다시 짜겠음. 원 소스가 아니라 파악이 덜됨

헉 정말 감사합니다.

이정도 까지 해주시다니요...ㅠㅠ

고맙습니다.

공부가 많이 되었습니다!!

var active=false; 얘는 남기고
if문 안에 active=false; 는 지워도 될꺼 같네요.
막 짜다 보니깐 쓸데 없는 소스도 막 적었네요.

// 아니네요. 그냥 두세요........
안돼네요 ㅋㅋㅋㅋㅋㅋ

혹시 더 염치없지만...ㅎ

해당 탭에 마우스를 올려놓고 있을때는

슬라이드가 되지 않도록 하려면

어덯게 해야 할까요..

 

힌트만 주시면 제가 알아서 해보도록 하겠습니다 !!


  <script>
  $(function () {
   $(".tab_content").hide();
   $(".tab_content:first").show();
   $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active").css("color", "#666");
    $(this).addClass("active").css("color", "#000");
    $(".tab_content").hide()
    var activeTab = $(this).attr("rel");
    $("#" + activeTab).fadeIn()
   });
   var start;
   var total = $("ul.tabs li").length; 
   function startTab(){
       start = setInterval(function(){
           var active=false;
           $("ul.tabs li").each(function(index){
                   if(active){
                       $(this).click();
                       active=false;
                       return;
                }
                if($(this).attr("class")=="active"){
                    if(index+1 == total){
                        active=false;
                        $("ul.tabs li").first().click();
                    }else{
                        active=true;
                    }
                }
                
            });
        }, 2000);
   }
       $("ul.tabs li").mouseover(function(){
          clearInterval(start);
    });
       $("ul.tabs li").mouseleave(function(){
           startTab();    
    });
     
   startTab();
    
  });
  </script>
답변을 작성하시기 전에 로그인 해주세요.
전체 204
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT