자동 전환 기능이있는 jQuery 탭

Question

저는 자바 스크립트를 이해하지 못했지만 Google 하나님 덕분에 탭이있는 영역을 관리했습니다.

탭 버튼을 클릭하면 해당 내용이 표시됩니다. 아래에 하나 더 많은 기능을 추가하겠습니다.

• 탭 버튼을 클릭하지 않은 경우에도 5 초마다 다음 탭으로 전환하십시오. 현재 활성 탭 탭 4, 5 초가 지난 경우
• , 아래에 내 현재 코드 표 1.

로 전환. 탭 */

.tabs { list-style: none; margin-top: 30px; } 
.tabs li { display: inline; } 
.tabs li a { min-width: 20%; color: black; float: left; display: block; padding: 1%; margin-left: 1%; margin-right: 1%; position: relative; text-decoration: none; text-align: center; border-top: 1px solid #333; border-bottom: 1px solid #333; } 
.tabs li a:hover { font-weight: bold; background: #fff; border-top: 1px solid #333; border-bottom: 1px solid #333; } 
.tabs li a:active { font-weight: bold; background: #fff; border-top: 1px solid #333; border-bottom: 1px solid #333; } 

/* HTML */

<div id="tabs"> 
    <ul class="tabs" id="tabsnav"> 
     <li><a href="#tab-1" class="menu-internal">Tab 1</a></li> 
     <li><a href="#tab-2" class="menu-internal">Tab 2</a></li> 
     <li><a href="#tab-3" class="menu-internal">Tab 3</a></li> 
     <li><a href="#tab-4" class="menu-internal">Tab 4</a></li> 
    </ul> 

    <div id="tab-1"> 
     Contents for tab 1 
    </div> 
    <div id="tab-2"> 
     Contents for tab 2 
    </div> 
    <div id="tab-3"> 
     Contents for tab 3 
    </div> 
    <div id="tab-4"> 
     Contents for tab 4 
    </div> 
</div> 

/* 자바에 대한

은/* CSS 내가 더 코드를 추가해야 할 것 같아요 */

<script> 
jQuery(document).ready(function() { 
    jQuery('#tabs > div').hide(); // hide all child divs 
    jQuery('#tabs div:first').show(); // show first child div 
    jQuery('#tabsnav li:first').addClass('active'); 

    jQuery('.menu-internal').click(function(){ 
    jQuery('#tabsnav li').removeClass('active'); 
    var currentTab = jQuery(this).attr('href'); 
    jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active'); 
    jQuery('#tabs > div').hide(); 
    jQuery(currentTab).show(); 
    return false; 
    }); 
    // Create a bookmarkable tab link 
    hash = window.location.hash; 
    elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash 
    if (elements.length === 0) { // if there aren't any, then 
    jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab 
    } else { elements.click(); } // else, open the tab in the hash 
}); 
</script> 

"5 초 후에 다음 탭으로 이동하고 탭 4 이후 탭 1로 돌아 가기"와 같은 위의 스크립트로 이동하십시오. 그러나, 나는 프로그래밍과 손실을 어떻게해야할지 모른다.

전문가의 도움을 받으실 수 있습니다.

감사합니다.

Answer 1

이

DEMO

이 하나가 꽤 많이 당신이 원하는 무엇인가 봅니다.

그것에 자신의 CSS를 추가

HTML :

<div id="tabs"> 
<ul class="tabs" id="tabsnav"> 
    <li><a href="#tab-1" class="menu-internal">Tab 1</a></li> 
    <li><a href="#tab-2" class="menu-internal">Tab 2</a></li> 
    <li><a href="#tab-3" class="menu-internal">Tab 3</a></li> 
    <li><a href="#tab-4" class="menu-internal">Tab 4</a></li> 
</ul> 

<div id="tab-1"> 
    Contents for tab 1 
</div> 
<div id="tab-2"> 
    Contents for tab 2 
</div> 
<div id="tab-3"> 
    Contents for tab 3 
</div> 
<div id="tab-4"> 
    Contents for tab 4 
</div> 
</div> 

JAVASCRIPT :

jQuery(document).ready(function() { 
jQuery('#tabs > div').hide(); // hide all child divs 
jQuery('#tabs div:first').show(); // show first child div 
jQuery('#tabsnav li:first').addClass('active'); 

jQuery('.menu-internal').click(function(){ 
jQuery('#tabsnav li').removeClass('active'); 
var currentTab = jQuery(this).attr('href'); 
jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active'); 
jQuery('#tabs > div').hide(); 
jQuery(currentTab).show(); 
return false; 
}); 
// Create a bookmarkable tab link 
hash = window.location.hash; 
elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash 
if (elements.length === 0) { // if there aren't any, then 
jQuery("ul.tabs li:first").addClass("active").show(); // show the first tab 
} else { elements.click(); } // else, open the tab in the hash 
}); 

희망이 도움이