相思资源网 Design By www.200059.com
今天我这边网速真是太慢了，打开一个网页要等待很久，但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下！ 当然这是我用Jquery来封装的 页面可以调用多次 调用方式 new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写！下面的是我的HTML一些结构如下：
复制代码 代码如下:
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="content hide">tab2</div>
<div class="content hide">tab3</div>
<div class="content hide">tab4</div>
</div>
</div>
结构是这样的！下面是我页面上的HTML/CSS的代码！
复制代码 代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js"><style>
#tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
#tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
.menu{ width:196px; height:18px; margin:0; padding:0;}
.menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;}
.menu li.current{ border-bottom:none;}
.content-main{ width:196px; height:200px; overflow:hidden;}
.content{ width:196px; height:200px; overflow:hidden; display:block;}
.hide{ display:none;width:196px; height:200px; overflow:hidden;}
.menu li.last-col{ border-right:none; width:49px;}
</style>
<script src="/UploadFiles/2021-04-02/AutoTab.js"></head>
<body>
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
<div class="hide">tab4</div>
</div>
</div>
<br /><br />
<div id="tab2">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
<div class="hide">tab4</div>
</div>
</div>
<script>new tabSlider("#tab1",4);</script>
<script>new tabSlider("#tab2",4);</script>
</body>
</html>
JS代码如下：
复制代码 代码如下:
// JavaScript Document
/*
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ 可以一个页面多次引用
依赖的结构 */
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="content hide">tab2</div>
<div class="content hide">tab3</div>
<div class="content hide">tab4</div>
</div>
</div>
/*页面引用的方式
new tabSlider("#tab1",4);
#tab1 是外部ID,4 指 一共有多少个li
*/
function tabSlider(obj,count){
var _this = this;
_this.obj = obj;
_this.count = count;
_this.time = 2000;//停留的时间
_this.n = 0;
var t;
this.slider = function(){
$(_this.obj + " .menu li").bind("mouseover",function(event){
$(event.target).addClass("current").siblings().removeClass("current");
var index = $(_this.obj + " .menu li").index(this);
$(_this.obj + " .content-main .content").eq(index).show().siblings().hide();
_this.n = index;
})
}
this.addhover = function(){
$(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});
}
this.autoplay = function(){
_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
}
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();
}
下面来说说下我封装这个js的思路，因为写任何程序 思路是最重要的，只要能想的清楚 代码就一定能实现掉！思路说的更好听的话 就是我们常说的“算法”！
1 function tabSlider(obj,count){} 用这个js来封装后传入参数！当在HTML页面上时直接调用tabSlider(obj,count)就可以了！
2 初始化一些参数 然后给这个函数自生自定义一个函数this.slider = function(){} 绑定个mouseover事件，初始化第一个li时 查找当前的div内容是否和当前li 指向同一个指针 如果相同 那块内容显示！其他的隐藏！
3 自定义this.addHover这个事件 当鼠标移上时候抽发这个事件！
4 自定义自动播放事件this.autoplay = function(){} 这个里面用了trigger这个触发方法_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
5 最后用个函数 来渲染上面的函数 调用上面的函数
复制代码 代码如下:
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();
复制代码 代码如下:
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="content hide">tab2</div>
<div class="content hide">tab3</div>
<div class="content hide">tab4</div>
</div>
</div>
结构是这样的！下面是我页面上的HTML/CSS的代码！
复制代码 代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js"><style>
#tab1{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
#tab2{ width:196px; height:220px; overflow:hidden; border:1px solid #666;}
.menu{ width:196px; height:18px; margin:0; padding:0;}
.menu li{ float:left; list-style:none; width:48px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; cursor:pointer;}
.menu li.current{ border-bottom:none;}
.content-main{ width:196px; height:200px; overflow:hidden;}
.content{ width:196px; height:200px; overflow:hidden; display:block;}
.hide{ display:none;width:196px; height:200px; overflow:hidden;}
.menu li.last-col{ border-right:none; width:49px;}
</style>
<script src="/UploadFiles/2021-04-02/AutoTab.js"></head>
<body>
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
<div class="hide">tab4</div>
</div>
</div>
<br /><br />
<div id="tab2">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
<div class="hide">tab4</div>
</div>
</div>
<script>new tabSlider("#tab1",4);</script>
<script>new tabSlider("#tab2",4);</script>
</body>
</html>
JS代码如下：
复制代码 代码如下:
// JavaScript Document
/*
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ 可以一个页面多次引用
依赖的结构 */
<div id="tab1">
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li class="last-col">tab4</li>
</ul>
<div class="content-main">
<div class="content">tab1</div>
<div class="content hide">tab2</div>
<div class="content hide">tab3</div>
<div class="content hide">tab4</div>
</div>
</div>
/*页面引用的方式
new tabSlider("#tab1",4);
#tab1 是外部ID,4 指 一共有多少个li
*/
function tabSlider(obj,count){
var _this = this;
_this.obj = obj;
_this.count = count;
_this.time = 2000;//停留的时间
_this.n = 0;
var t;
this.slider = function(){
$(_this.obj + " .menu li").bind("mouseover",function(event){
$(event.target).addClass("current").siblings().removeClass("current");
var index = $(_this.obj + " .menu li").index(this);
$(_this.obj + " .content-main .content").eq(index).show().siblings().hide();
_this.n = index;
})
}
this.addhover = function(){
$(_this.obj).hover(function(){clearInterval(t);},function(){t=setInterval(_this.autoplay,_this.time)});
}
this.autoplay = function(){
_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
}
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();
}
下面来说说下我封装这个js的思路，因为写任何程序 思路是最重要的，只要能想的清楚 代码就一定能实现掉！思路说的更好听的话 就是我们常说的“算法”！
1 function tabSlider(obj,count){} 用这个js来封装后传入参数！当在HTML页面上时直接调用tabSlider(obj,count)就可以了！
2 初始化一些参数 然后给这个函数自生自定义一个函数this.slider = function(){} 绑定个mouseover事件，初始化第一个li时 查找当前的div内容是否和当前li 指向同一个指针 如果相同 那块内容显示！其他的隐藏！
3 自定义this.addHover这个事件 当鼠标移上时候抽发这个事件！
4 自定义自动播放事件this.autoplay = function(){} 这个里面用了trigger这个触发方法_this.n = _this.n >=(_this.count-1)? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
5 最后用个函数 来渲染上面的函数 调用上面的函数
复制代码 代码如下:
this.factory = function(){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();
标签：
tab,切换,效果
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Jquery封装tab自动切换效果的具体实现的评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？