1.jQuery实现tab切换显示代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>tab页效果</title>

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<style type="text/css">

.wrap{border: 1px solid #eee;min-width: 400px; min-height: 400px;}

.tab span{border: 1px solid #ccc;width: 100px;height: 30px;padding-left:0px;margin: 10PX 10PX;}

.info{border: 1px dashed  	#006400 ;margin: 20px 0px;}

.h30{height: 30px;}

.huangse{background-color:#FFFF00 ;}

.qianlv{background-color: #F5FFFA ;}

</style>

</head>

<body>

<!-- tab页切换开始-->

<div class="wrap">

<div class="h30"></div>

<!-- tab切换源start -->

<div class="tab">

<span class="huangse">中文版tab</span>

<span class="">英文版tab</span>

<span class="">韩语版tab</span>

</div>

<!-- tab切换源end -->

<!-- 切换显示start -->

<div class="info">

<p>1.info one</p>

<p>2.中文版</p>

</div>

<div class="info" style="display: none">

<p>1.info two</p>

<p>2.英文版</p>

</div>

<div class="info" style="display: none">

<p>1.info three</p>

<p>2.韩语版</p>

</div>

<!-- 切换显示end -->

</div>

<!-- tab页切换结束-->

</body>

<script type="text/javascript">

$(function(){

/****遍历*****/

$(".wrap").find(".tab span").each(function(index,element){

/****绑定事件*******/

$(this).mousemove(function(e){

/****触发事件的显示控制****/

$(this).addClass("huangse").siblings().removeClass();

$(this).parent().parent().find(".info").eq(index).show().siblings(".info").hide();

})

})

})

</script>

</html>

2.效果展示图

jquery实现tab页切换显示div的更多相关文章

  1. 不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  3. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  4. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  5. tab页切换

    做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...

  6. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  7. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

  8. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  9. JQuery实现tab页

    用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="U ...

随机推荐

  1. Oracle Commit 方式 COMMIT WRITE batch NOWAIT;

    1111 CREATE OR REPLACE PROCEDURE update_hav_tpnd IS  CURSOR hav_tpnd_cur IS    SELECT d.hav_tpnd, d. ...

  2. 扫地雷II

    感谢格致杭业晟同学改进完善 uses crt;var  i,j,k,ls,x,y:byte;  b:array[0..11,0..11] of shortint;  f:array[0..11,0.. ...

  3. （Array）27. Remove Element

    Given an array and a value, remove all instances of that value in place and return the new length. D ...

  4. c/c++运算顺序问题

    发现没弄清楚这个问题的人很多,连我们c++老师都没弄清楚,转载一篇文章,以及C++ Primer原文. 裘宗燕:C/C++ 语言中的表达式求值 经常可以在一些讨论组里看到下面的提问:“谁知道下面C语句 ...

  5. 5，SFDC 管理员篇 - 数据模型 - 数据关联

    1,PickList 1,填写基本信息 2, 选择能角色的权限 3,在哪一个层上显示(object 上有多个 Record Type 对应多个层,需要选择在哪一个层显示) 4,Save   2,两个P ...

  6. C++学习基础六——复制构造函数和赋值操作符

    1.什么是复制构造函数 复制构造函数:是构造函数,其只有一个参数,参数类型是所属类的类型,且参数是一个const引用. 作用:将本类的成员变量赋值为引用形参的成员变量. 2.什么是赋值操作符 赋值操作 ...

  7. linux基础知识（四）

    •查看ip地址,ifconfig命令 •重启.启动.停止网络命令 •service network restart/start/stop   •VMnet0:用于虚拟桥接网络下的虚拟交换机 •VMne ...

  8. VerbalExpressions ——另类正则表达式

    对于文本处理来说,正则表达式无疑是一个非常强大的工具.但是编写和阅读正则表达式往往就不是那么一件非常愉快的事情了.本文在这里介绍另一种另类的正则表达式——VerbalExpressions,它采用函数 ...

  9. Redis的主从同步复制

    先来看一下Redis的主从同步复制的原理: 在Slave启动并连接到Master之后,它将主动发送一条SYNC命令.此后Master将启动后台存盘进程,同时收集所有接收到的用于修改数据集的命令,在后台 ...

  10. IconFont字体制作

    1. 第一步.准备svg格式图片 2. 登陆http://iconfont.cn/网站,上传图标. 3. 选中需要制作成iconfont的图标. 4. 将选中的图标转储为项目 5. 下载至本地. 6. ...