JQuery实现tab切换：

（jquery需要自己添加）

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>tab-JQ</title>

	<style>

		* {margin: 0; padding: 0; list-style: none;}

		#wrap {width: 600px; margin: 100px auto 0; overflow: hidden;}

		#tit {height: 30px;width: 600px;}

		#tit span {float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc;background: green;}

		#con li{display: none; height: 200px; width: 600px; background: pink;font-size: 100px;line-height: 200px;text-align: center;}

		#tit span.select {background: red; color: #ccc;}

		#con li.show {display: block;}

	</style>

	<script src='js/jquery-3.1.0.min.js'></script>

</head>

<body>

	<div id="wrap">

		<div id="tit">

			<span class="select">标题1</span>

			<span>标题2</span>

			<span>标题3</span>

		</div>

		<ul id="con">

			<li class="show">内容111</li>

			<li>内容222</li>

			<li>内容333</li>

		</ul>

	</div>

	<script>

		$('#tit span').click(function() {

			var i = $(this).index();//下标第一种写法

			//var i = $('tit').index(this);//下标第二种写法

			$(this).addClass('select').siblings().removeClass('select');

			$('#con li').eq(i).show().siblings().hide();

		});

	</script>

</body>

</html>

　　

JQuery实现tab切换的更多相关文章

  1. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. jquery 实现tab切换

    大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码 <!DOCTYPE html> <html lang ...

  3. jquery简易tab切换

    切换tab 使用eq()函数 eq() 方法将匹配元素集缩减值指定 index 上的一个. //为项目 3 设置红色背景 <ul> <li>list item 1</li ...

  4. jQuery带tab切换搜索框样式代码

    效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...

  5. 简单的jquery实现tab切换

    $(document).ready(function(){ $(".nav-menu-ctn").find("a").click(function(){ $(t ...

  6. jquery版tab切换效果

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

  7. 通过jquery实现tab切换

    //css代码 *{ margin: 0; padding: 0; } #box{ margin: 0 auto; width: 800px; border: 5px solid #000000; o ...

  8. jquery写tab切换,三行代码搞定

    <script type="text/javascript"> $("button").on("click",function( ...

  9. JQuery 实现 Tab 切换 index

    $(function(){ var h_new=$('.new h4 a'); var new_dl=$('.new dl'); new_dl.first().show(); h_new.mousee ...

随机推荐

  1. SharePoint Application Page启用匿名访问

    现在的项目需要使用sharepoint application page来展示图片影像,并让其它应用系统匿名访问,经过一番认真研究,主要有下面的步骤: 1. 在web applicaiton leve ...

  2. MyBatis源码解读（3）——MapperMethod

    在前面两篇的MyBatis源码解读中,我们一路跟踪到了MapperProxy,知道了尽管是使用了动态代理技术使得我们能直接使用接口方法.为巩固加深动态代理,我们不妨再来回忆一遍何为动态代理. 我相信在 ...

  3. 最全DOS的CMD命令，程序员必会

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr. ...

  4. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  5. .Net程序员学用Oracle系列(8)：触发器、作业、序列、连接

    1.触发器 2.作业 2.1.作业调度功能和应用 2.2.通过 DBMS_JOB 来调度作业 3.序列 3.1.创建序列 3.2.使用序列 & 删除序列 4.连接 4.1.创建连接 4.2.使 ...

  6. iOS简单快速集成Cordova

    如果你对于什么是Cordova还不了解,可以先移步到我另一个文章:Cordoval在iOS中的运用整理 里面有详细的介绍跟如何搭建Cordova:而本文则是要介绍JiaCordova插件,如果你有一点 ...

  7. Eclipse导入项目常见问题----facet版本问题04

    问题如下: 解决办法 右击项目,找到最下面的properties,在搜索facet jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37107022/art ...

  8. Java之FilenameFilter接口

    FilenameFilter接口:是用于过滤文件的 要实现的是accept方法 实例代码: 1,匿名类实现FilenameFilter-–过滤指定类型文件 package File类过滤器; impo ...

  9. 基于Python + requests 的web接口自动化测试框架

    之前采用JMeter进行接口测试,每次给带新人进行培训比较麻烦,干脆用python实现,将代码和用例分离,易于维护. 项目背景 公司的软件采用B/S架构,进行数据存储.分析.管理 工具选择 pytho ...

  10. vue入门须知

    1.vue基本结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...