jquery实现tab页切换显示div

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的更多相关文章

不用jquery实现tab页切换，刷新，后退，前进状态自动维护很好用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品
例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始: 1. 打开调试开关文件地址:include/cls_template.php 找到 : functi ...
7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
tab页切换
做了一个tab页切换.点击不同tab,显示对应的内容信息如图 =================HTML===================== <!doctype html public ...
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 ...
用CSS实现Tab页切换效果
用CSS实现Tab切换效果最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器缺点:只有 ...
使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
JQuery实现tab页
用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="U ...

随机推荐

linux后台进程管理工具supervisor
Linux的后台进程运行有好几种方法,例如nohup,screen等,但是,如果是一个服务程序,要可靠地在后台运行,我们就需要把它做成daemon,最好还能监控进程状态,在意外结束时能自动重启. su ...
ucenter 整合外部网站，实现登录等操作
最近公司网站要出手机版,由于与论坛要有互通,实现会员的共享,由于对discuz不熟悉,起先考虑的是直接读取discuz的用户表,然后进行判断等操作,发现过于复杂,而且安全也不好. 前一段时间进行过论坛 ...
根据 MySQL 状态优化 ---- 3. key_buffer_size
查看 MySQL 服务器运行的各种状态值: mysql> show global status: 3. key_buffer_size key_buffer_size 是设置 MyISAM 表索 ...
alarm rtc
http://sharp2wing.iteye.com/blog/1329518 http://blog.csdn.net/sking002007/article/details/6593809 io ...
[翻译]用神经网络做回归(Using Neural Networks With Regression)
本文英文原文出自这里, 这个博客里面的内容是Java开源, 分布式深度学习项目deeplearning4j的介绍学习文档. 简介: 一般来说, 神经网络常被用来做无监督学习, 分类, 以及回归. 也就 ...
MSsql bcp
--将test_1表导出在F盘根目录下/ reconfigure EXEC master..xp_cmdshell 'bcp test.dbo.test_1 out f:\abc.txt -c -q ...
给日志添加“复制”效果
给日志添加如上效果的实现方法: 在日志编辑页面,源代码中,添加如下代码,包裹住目标内容style1: <div class="cnblogs_code"><di ...
OAuth2集成
目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放平台进行授权的问题,OAuth就是干这个的,OAuth2是OAuth协议的下一个版本,相比OAut ...
Java2OP
Java2OP D:\Program Files (x86)\Embarcadero\Studio\18.0\bin\converters\java2op\Java2OP.exe Java2OP.ex ...
yum 介绍
yum是一个用于管理rpm包的后台程序,用python写成,可以非常方便的解决rpm的依赖关系.在建立好yum服务器后,yum客户端可以通过 http.ftp方式获得软件包,并使用方便的命令直接管理. ...

jquery实现tab页切换显示div

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

随机推荐

热门专题