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. java 线程数据同步

    java 线程数据同步 由买票实例 //java线程实例 //线程数据同步 //卖票问题 //避免重复卖票 //线程 class xc1 implements Runnable{ //定义为静态,可以 ...

  2. shell script练习

    执行脚本的几种方式: 1. sh a.sh 或者  bash a.sh  调用的是 /bin/bash 进程执行的,所以脚本不需要执行权限. 2. 直接使用绝对路径执行, /home/script/a ...

  3. unity3d c#调用控件属性

    GUIText控件wenzi text 属性值 GameObject.Find("wenzi").guiText.text="修改内容"; 把你要获取的变量权限 ...

  4. 快速排序 && 希尔排序 && 插入排序

    1. 快速排序 不稳定的排序. 平均(与最好情况)时间复杂度:O(nlgn)   |  最坏情况时间复杂度(元素有序,递归栈为 O(n)):O(n2) 适合的数据结构:数组,双向链表. #includ ...

  5. IIS7 rename application or site

    rename site 比较容易,在IIS里面就可以直接 rename,也可以用 cmd 的方式 1. 打开 cmd 2. cd C:\Windows\System32\inetsrv 3. appc ...

  6. JS-改变页面的颜色（二）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第一个例 ...

  7. Oracle 表分区

    从以下几个方面来整理关于分区表的概念及操作: 表空间及分区表的概念 表分区的具体作用 表分区的优缺点 表分区的几种类型及操作方法 对表分区的维护性操作 1.表空间及分区表的概念 表空间: 是一个或多个 ...

  8. CSS基础篇

    写的不错,收藏 http://www.cnblogs.com/suoning/p/5625582.html

  9. Eclipse/MyEclipse怎么设置个性化代码注释模板

    1.打开Eclipse/MyEclipse工具,打开或创建一个Java工程,点击菜单Window->Preferences弹出首选项设置窗口 2.展开左侧Java->Code Style- ...

  10. codeforces 361 B - Mike and Shortcuts

    原题: Description Recently, Mike was very busy with studying for exams and contests. Now he is going t ...