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. Java学习笔记--链表

    心在山东身在吴,飘蓬江海漫嗟吁. 他时若遂凌云志, 敢笑黄巢不丈夫. --水浒传 先上源代码,LinkedList类: private static class Node<E> { E i ...

  2. ZooKeeper实践：（1）配置管理

    一. 前言     配置是每个程序不可或缺的一部分,配置有多重方式:xml.ini.property.database等等,从最初的单机环境到现在的分布式环境. 1. 以文件的格式存储配置,修改任何都 ...

  3. 类设计的SOLID原则

    SOLID原则是面向对象范式的核心 单一职责原则(Single Responsible Principle, SRP):对于一个类,应该仅有一个引起它变化的原因.其基础是内聚,表示类完成单一功能的程度 ...

  4. 如何安装Elasticsearch?

    最近工作中要用到搜索引擎,由于目前用的搜索引擎是LeanCloud 提供的 ,不太好用,不支持范围等搜索,而且每天还收费30元,请求次数也有限制.基于这些原因,我们只好在自己的服务器上部署搜索引擎了. ...

  5. （入门篇 NettyNIO开发指南）第四章-TIP黏包/拆包问题解决之道

    熟悉TCP编程的读者可能都知道,无论是服务端还是客户端,当我们读取或者发送消息的时候,都需要考虑TCP底层的粘包/拆包机制.木章开始我们先简单介绍TCP粘包/拆包的基础知识,然后模拟一个没有考虑TCP ...

  6. Akka（3）： Actor监管 - 细述BackoffSupervisor

    在上一篇讨论中我们谈到了监管:在Akka中就是一种直属父子监管树结构,父级Actor负责处理直属子级Actor产生的异常.当时我们把BackoffSupervisor作为父子监管方式的其中一种.实际上 ...

  7. numpy中linspace用法 （等差数列创建函数）

    linspace  函数 是创建等差数列的函数, 最好是在 Matlab  语言中见到这个函数的,近期在学习Python 中的 Numpy, 发现也有这个函数,以下给出自己在学习过程中的一些总结. ( ...

  8. python str的一些方法

    在python有各种各样的string操作函数.在历史上string类在python中经历了一段轮回的历史.在最开始的时候,python有一个专门的string的module,要使用string的方法 ...

  9. Java中4种类型的内部类 .

    在Java中有4种不同类型的内部类可以使用.下面给出它们的名称和例子. 1.静态嵌套类(Static Nested Classes) class Outer { static class Inner  ...

  10. javacv开发详解之1：调用本机摄像头视频（建议使用javaCV1.3版本）

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...