您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
Jquery封装tab自动切换效果的具体实现
作者：佚名 责任编辑：admin 更新时间：2022-06-22
今天我这边网速真是太慢了，打开一个网页要等待很久，但是还是想写篇文章----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="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<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="AutoTab.js"></script>
</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 [email protected]
*@ 可以一个页面多次引用
依赖的结构 */
<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 = i
- 上一个程序编程： 网页前端优化之滚动延时加载图片示例
- 下一个程序编程： ajax请求json数据并用js解析
