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. LNMP1.3一键安装Linux环境，配置Nginx运行ThinkPHP3.2

    LNMP1.3一键安装Linux环境,配置Nginx运行ThinkPHP3.2 你是否遇见过:安装LNMP1.3环境后,运行ThinkPHP 3.2,只能打开首页,不能访问控制器,报404错误. 按照 ...

  2. js算法集合（二） javascript实现斐波那契数列 （兔子数列）

    js算法集合(二)  斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解.     Javascript实 ...

  3. Advanced Sort Algorithms

    1. Merge Sort public class Mergesort { private int[] numbers; private int[] helper; private int numb ...

  4. swift学习 - tableView自适应高度1（xib autoLayout）

    tableView自适应高度 效果图: 源码: class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSo ...

  5. 记一次亲身踩过的hibernate的bug

    记一次亲身踩过的hibernate的bug 在写实体类时,经常会对域增加校验,例如@NotNull表示哪个字段不能为空,昨天晚上调试代码,就遇到了问题, @Entity public class Ap ...

  6. rowid去重（删除表的重复记录）

    -- 构造测试环境SQL> create table andy(id int,name varchar2(10));Table created.SQL>insert into andy v ...

  7. 关于EF中直接执行sql语句的参数化问题

    某天 , 在review项目中代码的时候, 发现有哥们直接通过 Database.ExecuteSqlCommand("select * from order_info where  com ...

  8. eclipse hibernate导出数据库实体类

    打开eclipse->help->Eclipse Marketplace->查找hibernate->安装如下插件 只要安装其中一个,hibernate tool即可: 安装完 ...

  9. CCNP第一课：默认路由（路由黑洞，路由终结）

    一:功能实现 R1的环回口由R3控制下放,下放之后R4才可以ping通 代码: R1: 只需要一条静态路由,能回包就行了 ip route 20.1.1.0 255.255.255.0 10.1.1. ...

  10. 【PHP】最详细PHP从入门到精通（二）——PHP中的函数

     PHP从入门到精通 之PHP中的函数 各位开发者朋友大家好,自上次更新PHP的相关知识,得到了大家的广泛支持.PHP的火爆程度不言而喻,函数作为PHP中极为重要的部分,应诸位的支持,博主继续跟进更新 ...