基于jquery的tab切换 js原理

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

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

【 tulaoshi.com - Web开发】

打包下载

html代码:

代码如下:
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.');
}
});
});

效果图:

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

上一篇： VisualBasic对象使用二
下一篇： jquery 页面全选框实践代码

看过《基于jquery的tab切换 js原理》的人还看了以下文章更多>>

jquery tab标签页的制作

标签： Web开发

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件，还有就是关键的css样式编写，控制显示的样式，代码如下： !DOCTYPE HT...

jquery imgareaselect 使用利用js与程序结合实现图片

标签： Web开发

代码如下: /* 缺陷，当前在ff3下，用jquery的 width()与height()函数，在不设置图片的宽度与高度的时候，不能取到需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){ this.pic_obj = jQuery("#"+pic_id); this.pic_width; this.pic_height; this.view_div_id = view_div_id; t...

网站设计Tab标签切换的效果制作

标签： Web开发

在如今的网页设计中，Tab标签切换的应用已经是非常的广泛，基本在每个网站中都有这样的效果被应用到前台的设计中去，来完成之前无法完成的任务。所以， Tab标签的设计也就成了一个不可小觑的工作流程，在浏览一个网站时，看到了他们的 Tab标签制作的导航菜单效果，但却是没有达到该有的效果，反而增加了用户浏览的困惑，该站的 Tab标签效...

JQuery.uploadify 上传文件插件的使用详解 for A

标签： Web开发

后来朋友推荐了一个这个叫uploadify的上传插件，似乎挺好，就到官方下了个示例运行，感觉挺好，自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧： 1. 下载官方网站： http://www.uploadify.com/ 直接下载：jquery.uploadify-v2.1.0.rar 下载解压后：说明：它里面有demo 但是是PHP的，还有一个帮助文档：uploadify v2.1.0 Manu...

基于JQuery的cookie插件

标签： 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 /...

查看更多精彩>>