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切换,三行代码搞定

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

  8. JQuery 实现 Tab 切换 index

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

  9. jQuery的DOM操作实例(1)——选项卡&amp;&amp;Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. netbeans git 配置(ssh方式)

    git出问题了,自己又重新配置了下git. 参考文章: https://netbeans.org/kb/docs/ide/git_zh_CN.html#github

  2. Linux中iptables设置详细

    无论如何,iptables是一个需要特别谨慎设置的东西,万一服务器不在你身边,而你贸然设置导致无法SSH,那就等着被老板骂吧,呵呵... 一下内容是为了防止这种情况发生而写的,当然很初级,不过一般服务 ...

  3. python中的类机制

    一.python中的对象 1.python中对象种类及关系 <type 'type'>:该对象可以成为其他类的类型,python中几乎所有对象都是直接或间接由<type 'type' ...

  4. win7安装oracle 10g问题总结。

    1.安装oracle10g的时候,出现此问题,如图:  右键安装程序(setup.exe) -> 属性 -> 兼容性 -> 以兼容模式运行这个程序 windows xp( servi ...

  5. 基于Linux环境,创建PHP后台守护进程(转载)

    应用场景:某些情况下,我们需要持续的周期性的提供一些服务,比如监控内存或cpu的运行状况,这些应用与客户端是没有关系的,不是说客户端(如web界面,手机app等)关闭了,我们就不监控内存或cpu了,为 ...

  6. Gym 100712

    我的作用:增加罚时. noip380分大佬全程带飞出了10T,可惜被我搞的罚时太高了... 那啥,你会发现java代码有两种风格,嗯两个人,c++自然就是自招大佬了... A:大水题略 B:(不是我写 ...

  7. Linux基础学习(9)--文件系统管理

    第九章——文件系统管理 一.回顾分区和文件系统 1.分区类型: 2.分区表示方法: 3.文件系统: 二.文件系统常用命令 1.df命令.du命令.fsck命令和dump2fs命令: (1)文件系统查看 ...

  8. Java基本语法之动手动脑

    1.枚举类型 运行EnumTest.java 运行结果:false,false,true,SMALL,MEDIUM,LARGE 结论:枚举类型是引用类型,枚举不属于原始数据类型,它的每个具体值都引用一 ...

  9. 2. KNN和KdTree算法实现

    1. K近邻算法(KNN) 2. KNN和KdTree算法实现 1. 前言 KNN一直是一个机器学习入门需要接触的第一个算法,它有着简单,易懂,可操作性强的一些特点.今天我久带领大家先看看sklear ...

  10. wamp安装xdebug特殊情况win7 64位安装32位wamp

    在wamp上安装xdebug网上很多文章都介绍了方法,但是我这里遇到了一个很特殊的情况,在网上很少有人提及: 我机器是win7 64位的,安装的wamp1.7.4是32位的,这是后来导致出现奇怪现象的 ...