我不太懂 javascript,但感谢 google god,我设法有了一个标签区域。
当点击标签按钮时,会显示相应的内容。我想再添加一项功能,如下所示。
- 即使没有点击标签按钮,也每 5 秒切换到下一个标签。
- 如果当前事件选项卡是选项卡 4 并且已经过去 5 秒,则切换回选项卡 1。
下面是我当前的代码。
/* 标签的 CSS */
.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 */
<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”。但是,我不会编程,一头雾水。
专业人士的帮助将不胜感激。
谢谢。
最佳答案
试试这个
这正是您想要的。
添加你自己的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
});
希望对你有帮助
关于javascript - 具有自动切换功能的 jQuery Tabs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23678337/