基于jquery的tab切换 js原理


Posted in Javascript onApril 01, 2010

html代码:

<div class="details"> 
<ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3"><b>在来个</b></li><li></li></ul> 
<dl id="a1">11111111111111111111111111111111 
</dl> 
<dl id="a2" style="display:none"> 
22222222222222222222222222222222222 
</dl> 
<dl id="a3" style="display:none">3333333333333333333333333333333333333 
</dl> 
</div>

js代码:
$(function(){ 
$(".tab>li").mouseover(function(){ 
$(".tab>li").removeClass("on"); 
$(this).addClass("on"); 
var target = $('#' + this.rel); 
if (target.size() > 0) { 
$('.details > dl').hide(); 
target.show(); 
} else { 
alert('There is no such container.'); 
} 
}); 
});

效果图:

基于jquery的tab切换 js原理
打包下载地址

Javascript 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
js上传图片预览的实现方法
May 09 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 #Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 #Javascript
JQuery autocomplete 使用手册
Apr 01 #Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 #Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
js prototype截取字符串函数
Apr 01 #Javascript
javascript getElementsByClassName函数
Apr 01 #Javascript
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python中的decimal类型转换实例详解
2019/06/26 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
通过cmd进入python的步骤
2020/06/16 Python
详细分析Python collections工具库
2020/07/16 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
VC++笔试题
2014/10/13 面试题
项目建议书模板
2014/05/12 职场文书
考试诚信承诺书
2014/05/23 职场文书
企业文化理念标语
2014/06/10 职场文书
经济类毕业生求职信
2014/06/26 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
群教个人对照检查材料
2014/08/20 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
测量员岗位职责
2015/02/14 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
配置nginx负载均衡
2022/05/06 Servers