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. ArcGIS 网络分析[1.5] 使用点线数据一起创建网络数据集（如何避免孤立点/点与线的连通性组合结果表）

    ArcGIS中最基本的三种矢量数据是什么?点线面. 网络中除了路网之外,还会有地物点. 如上图,我们在建立网络数据集的时候,作为实验,当然可以只是公路网.但是在大型的决策任务中,网络数据集就不只是公路 ...

  2. Java学习笔记——序列化和反序列化

    寒雨连江夜入吴,平明送客楚山孤. 洛阳亲友如相问,一片冰心在玉壶. --芙蓉楼送辛渐 持久化数据的第一种方式.在序列化之前也可以把数据打散逐行存储在文件中,然后在逐行读取. 比如定Student类 用 ...

  3. redis-key相关命令

    本篇主要介绍和redis的key进行操作的相关命令. 命令 描述 复杂度 返回值 DEL key [key ...] 删除给定的一个或多个 key .不存在的 key 会被忽略.删除单个列表.集合.有 ...

  4. HiveHbase集成实践

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl/p/6857891.html 转载请注明出处 简单的说就是可以通过Hive SQL直接对hbase的表进行读写操 ...

  5. docker安装hadoop集群

    docker安装hadoop集群?图啥呢?不图啥,就是图好玩.本篇博客主要是来教大家如何搭建一个docker的hadoop集群.不要问 为什么我要做这么无聊的事情,答案你也许知道,因为没有女票.... ...

  6. 最近项目用到Dubbo框架，分享一下~

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  7. ar1220f-s四条拨号光纤做的策略路由实现负载均衡

    acl number 3001  //内网数据流不需被重定向到外网出口. rule 5 permit ip source 192.168.0.0 0.0.255.255  destination 19 ...

  8. Hibernate原理

    Hibernate使用基本上会,但是却一直不知道Hibernate内部是怎么工作的 什么是Hibernate? Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象 ...

  9. Git Flow Note

    近期困惑于Git代码版本控制,集中两天时间研究,其中基础知识来源于<Git权威指南>,分支思想则来源于一篇博文<A successful Git branching model> ...

  10. Bash Scripting Learn Notes

    References: [1] http://www.tldp.org/LDP/Bash-Beginners-Guide/html/ 1. Executing programs from a scri ...