基于jquery的tab切换 js原理

2016-02-19 13:32 3 1 收藏

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

【 tulaoshi.com - Web开发 】

打包下载

html代码:

(本文来源于图老师网站,更多请访问https://www.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://www.tulaoshi.com/webkaifa/)


来源:https://www.tulaoshi.com/n/20160219/1604596.html

延伸阅读
标签: Web开发
使用 jQuery 写 JavaScript 脚本就像是用 Delphi 写 Windows 程序一样, 它不是更强大, 只是更易用. 计划先全面浏览、测试一遍 jQuery 的语法, 同时洞察其逻辑与思想; 最后尝试在 Delphi 中使用 jQuery, 估计要比使用 MSHTML.pas 方便得多. 官方站点: http://jquery.com/ 中文文档: http://jquery-api-zh-cn.googlecode.com/ 下载地址: http:/...
标签: Web开发
这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 代码如下: !DOCTYPE HT...
标签: Web开发
如果你查找Jquery的API,会发现这个好象是Jquery的一个盲点,找来找去也没有明确说明用什么办法可以取到HTML标签的名字,如果直接用 $("H1").tagName 这样的方式也无法取到“H1”这样的值,好象只会得到“undifined”。 后来发现Jquery居然将tagName也视为属性之一了,有趣。 所以用 $("H1").attr("tagName") !DOCTYPE html PUBLIC "-...
标签: Web开发
简单使用方法: 代码如下: html head titleJQuery-Cookie插件/title script type="text/javascript" src="jquery-1.4.js"/script script type="text/javascript" src="jquery.cookie.js"/script /head body a href="#"设置cookie1/abr a href="#"设置cookie2/abr a href="#"获取cookie/abr a href="#"删除cookie/abr /body /...
标签: Web开发
后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧: 1. 下载 官方网站: http://www.uploadify.com/ 直接下载:jquery.uploadify-v2.1.0.rar 下载解压后: 说明:它里面有demo 但是是PHP的,还有一个帮助文档:uploadify v2.1.0 Manu...

经验教程

484

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部