基于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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
用vue设计一个日历表
Dec 03 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Apache部署Django项目图文详解
2019/07/30 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
详解python对象之间的交互
2020/09/29 Python
python自动生成sql语句的脚本
2021/02/24 Python
美术教学感言
2014/02/22 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
避暑山庄导游词
2015/02/04 职场文书
史上最牛辞职信
2015/05/13 职场文书
军事博物馆观后感
2015/06/05 职场文书
食品卫生管理制度
2015/08/06 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS