jquery Tab默认情况下自动切换
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<title>jquery Tab默认情况下自动切换 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<!--HTML代码:-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#tabAuto{ width:194px; height:200px; overflow:hidden; border:1px solid #333;}
.tabAuto{ width:196px; overflow:hidden; margin:0; padding:0;}
.tabAuto li{ width:64px; height:22px; float:left; border-right:1px solid #333; border-bottom:1px solid #333;list-style:none; text-align:center; border-bottom:1px solid #333; cursor:pointer;}
.tabAuto li.current{ border-bottom:none;}
.tgh-box{ width:196px; height:176px; overflow:hidden;cursor:pointer;}
.tgh-box div{ width:196px; height:176px;}
</style>
<div id="tabAuto">
<ul class="tabAuto">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tgh-box">
<div>tab1</div>
<div>tab2</div>
<div>tab3</div>
</div>
</div>
<!--script src="tabAuto.js"></script-->
<!-- tabAuto.js如下 -->
<script type="text/javascript">
// JavaScript Document
$(function(){
$(".tabAuto li:first").addClass("current");
$(".tgh-box div").not(":first").hide();
$(".tabAuto li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
var index = $(".tabAuto li").index(this);
$(".tgh-box div").eq(index).show().siblings().hide();
})
})
//自动轮换代码
$(function(){
$(".tabAuto li:first").addClass("current");
$(".tgh-box div:first").css('display','block');
autoScroll();
contentHover();
currentHover();
});
var i=-1; //第i+1个tab开始;
var offset = 2000; //轮换时间
var timer = null;
function autoScroll(){
var n = $(".tabAuto li").length - 1;
i++;
if(i > n)
i=0;
slide(i);
timer = window.setTimeout(autoScroll,offset);
}
function slide(i){
$(".tabAuto li").eq(i).addClass("current").siblings().removeClass("current");
$(".tgh-box div").eq(i).show().siblings().hide();
}
function currentHover(){
$(".tabAuto li").hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},function(){
timer = window.setTimeout(autoScroll,offset);
this.blur();
return false;
})
}
function contentHover(){
$(".tgh-box div").hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},function(){
timer = window.setTimeout(autoScroll,offset);
this.blur();
return false;
})
}
</script>
附上图:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通