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. TextView与Html相结合的具体方法？

    TextView与Html相结合的具体方法? android教程之textview解析带图片的html示例 Android中的TextView,本身就支持部分的Html格式标签.这其中包括常用的字体大 ...

  2. Linux 下三种方式设置环境变量

    1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似的错误. 2.那么什么是环境变 ...

  3. AX Dynamic 2012 SSRS autorepot中取当前公司名、打印时间、打印页码

    1.  ssrs---取公司名称 =Microsoft.Dynamics.Framework.Reports.DataMethodUtility.PostDataMethodEvaluation(Mi ...

  4. MyBatis环境配置

    <settings> <!-- 使全局的映射器启用或禁用缓存. --> <setting name="cacheEnabled" value=&quo ...

  5. 58. N-Queens && N-Queens II

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...

  6. 二模02day1解题报告

    T1.淘汰赛制 比赛时的淘汰赛制,给出每两个球队比赛的胜率,求出最终胜率最高的队伍. 这题的概率真的很难算啊感觉...一开始打的代码打下来就是用f[i][j]表示i场比赛后第j人还在场的概率.不难看出 ...

  7. OAuth2集成

    目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题,OAuth就是干这个的,OAuth2是OAuth协议的下一个版本,相比OAut ...

  8. Bootstrap修改input file默认样式

    html部分 <div class="form-group"> <label class="col-sm-3 control-label"&g ...

  9. 使用WCF 测试客户端测试你的WCF服务

    wcftestclient.exe是一个GUI的工具用于测试WCF,只需在Visual studio command line 窗口中键入 wcftestclient,就启动这个程序.如下图: 然后通 ...

  10. avalon2学习教程15指令总结

    avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...