具有自動切換功能的jQuery標籤

Question

我不太瞭解javascript，但設法得到了一個標籤區域感謝穀神。

點擊標籤按鈕時，顯示相應的內容。我想添加一個更多的功能如下。

• 即使沒有標籤按鈕被點擊，每隔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> 

/* JAVA

/* 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 
}); 

希望這有助於