基于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 写类方式之八
Jul 05 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
vue 页面跳转的实现方式
Jan 12 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后门代码解析
2014/07/05 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
js arguments对象应用介绍
2012/11/28 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python验证码识别的实例详解
2016/09/09 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
如何在python中判断变量的类型
2020/07/29 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
自荐信的格式
2014/03/10 职场文书
干部下基层实施方案
2014/03/14 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
感恩老师主题班会
2015/08/12 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS