基于jquery的tab切换 js原理

沫沫心弦

沫沫心弦

2016-02-19 13:32

下面图老师小编要向大家介绍下基于jquery的tab切换 js原理,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

打包下载

html代码:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)代码如下:
div
ulli rel="a1"b个人资料/b/lili rel="a2"b帐号维护/b/lili rel="a3"b在来个/b/lili/li/ul
dl11111111111111111111111111111111
/dl
dl
22222222222222222222222222222222222
/dl
dl3333333333333333333333333333333333333
/dl
/div

js代码:
代码如下:
$(function(){
$(".tabli").mouseover(function(){
$(".tabli").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.');
}
});
});

效果图:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)


展开更多 50%)
分享

猜你喜欢

基于jquery的tab切换 js原理

Web开发
基于jquery的tab切换 js原理

jMessageBox 基于jQuery的窗口插件

Web开发
jMessageBox 基于jQuery的窗口插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery DOM操作 基于命令改变页面

Web开发
jQuery DOM操作 基于命令改变页面

JQuery Dialog(JS 模态窗口,可拖拽的DIV)

Web开发
JQuery Dialog(JS 模态窗口,可拖拽的DIV)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

基于jQuery的弹出消息插件 DivAlert之旅(一)

Web开发
基于jQuery的弹出消息插件 DivAlert之旅(一)

基于jQuery的消息提示插件 DivAlert之旅(二)

Web开发
基于jQuery的消息提示插件 DivAlert之旅(二)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

VisualBasic对象使用二

VisualBasic对象使用二

jquery 页面全选框实践代码

jquery 页面全选框实践代码
下拉加载更多内容 ↓