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. Windows，caffe 仅cpu

    http://caffe.berkeleyvision.org/installation.html 按着官网的步骤:https://github.com/BVLC/caffe/tree/windows ...

  2. 简单的Web留言本

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. flask 添加日志

    def add_error_handler(app): for exception in default_exceptions: app.register_error_handler(exceptio ...

  4. Zerojudge解题心得

    我进入娄山中学已经有1年多了,也就是说我学习编程也有1年多了,在这一年多的时间中,我已经对编程有了初步的了解.其实只要抓住平时的空闲时间加以利用,哪怕每个星期就做那么三四题,经过了一段时间沉淀,也会有 ...

  5. 栅格数据处理 RasterDataset RasterLayer Raster RasterBandCollection

    1 IRasterLayer myrasterlayer = MapControl.Map.Layer[index] as IRasterLayer;2 IRaster myRaster = myra ...

  6. Oracle Solaris 11.2 Beta Firefox 17.0.6 添加 flashplayer 插件

    1.复制libflashplayer.so插件到路径:~/.mozilla/plugins/下.2.打开Firefox,在地址栏输入about:config.回车:在过滤器那一栏输入 plugin.e ...

  7. 4，SFDC 管理员篇 - 数据模型 - 基本对象

    Setup | Customize | Object Name | Filed   1, 标准字段定义 standard field:系统字段,不能删除,但是能在页面中remove non-requi ...

  8. Spring day04笔记（SVN讲解和回顾昨天知识）

    spring day03回顾 事务管理 基于xml配置 1.配置事务管理器 jdbc:DataSourceTransactionManager hibernate:HibernateTransacti ...

  9. ffmpeg去logo<转>

    用到 video filter —— delogo 通过周围像素插值去除 logo. 参数介绍: x y (必须)指定 logo 的坐标. w h (必须)指定 logo 的宽和高. band, t ...

  10. Corba、protocol buffer、SOA的区别 （转）

    From: http://www.zhihu.com/question/20279489 Google的protocol buffers?这个跟corba.soa没啥关系,不同层次的概念,没法比.pr ...