基于jquery自己写tab滑动门(通用版)


Posted in Javascript onOctober 30, 2012

css:

.main 
{ 
height:360px; 
width:290px; 
border:1px solid #444444; 
font-size:12px; 
color:#444444; 
margin:20px; 
} 
.main_top 
{ 
height:30px; 
width:290px; 
line-height:30px; 
text-align:left; 
background-color:#999999; 
border-bottom:1px solid #444444; 
} 
.main_top ul 
{ 
padding:0px; 
margin:0px; 
list-style-type:none; 
position:absolute; 
} 
.main_top ul li.h_qian 
{ 
float:left; 
width:80px; 
text-align:center; 
background-color:#999999; 
height:30px; 
} 
.main_top ul li.h_hou 
{ 
float:left; 
width:80px; 
text-align:center; 
background-color:#ffffff; 
cursor:pointer; 
margin-top:1px; 
height:30px; 
font-weight:bold; 
} 
.main_content 
{ 
margin:10px; 
}

 js:
function tabchange(obj,p,c,q,h) { 
$(obj).parent().find("li").attr("class", ""+q+""); 
$(obj).parents("."+p+"").find("."+c+"").hide(); 
$(obj).attr("class", ""+h+""); 
var j = $(obj).index(); 
$(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show(); 
}

html:
<div class="main"> 
<div class="main_top"> 
<ul> 
<li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模块</li> 
<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模块</li> 
<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模块</li> 
</ul> 
</div> 
<div class="main_content">第1块 
</div> 
<div class="main_content" style="display:none;">第2块 
</div> 
<div class="main_content" style="display:none;">第3块 
</div> 
</div>

代码很简单,不多说了,详细使用方法请参照Demo中tangtab.js里的注释。

附:
在线演示:http://demo.3water.com/js/2012/TabDemo/
打包下载:TabDemo_3water.rar

Javascript 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 #Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 #Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 #Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 #Javascript
改进版通过Json对象实现深复制的方法
Oct 24 #Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 #Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 #Javascript
You might like
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
关于PHP开发的9条建议
2015/07/27 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
jquery使用经验小结
2015/05/20 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
Python中functools模块函数解析
2017/03/12 Python
python处理document文档保留原样式
2019/09/23 Python
如何用python处理excel表格
2020/06/09 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
捐款活动总结
2014/08/27 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
材料采购员岗位职责
2015/04/03 职场文书
民事辩护词范文
2015/05/21 职场文书
公司员工离职感言
2015/08/03 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
《火烧云》教学反思
2016/02/23 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis