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. Linux中grep命令学习

    1.简介 grep是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.Unix的grep家族包括grep.egrep和fgrep.egrep和fgrep的命令只跟grep有很小 ...

  2. Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6869133.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(一)——My ...

  3. Linux服务器的远程IP限制

    系统环境: Linux-centOS+ubuntu 操作: 编辑允许通过IP 路径:vim /etc/hosts.allow sshd:192.168.1.1 编辑禁止通过IP 路径:vim /etc ...

  4. 关于微信小程序遇到的wx.request({})问题

    域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...

  5. Vulkan Tutorial 05 物理设备与队列簇

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Selecting a physical device 通过VkInstance初始 ...

  6. js实现分页

    <html> <head> <meta charset='utf-8'> <script type="text/javascript" s ...

  7. Linux下让一个程序开机自动启动

    1.chkconfig但是要在脚本中满足一定的条件(/etc/init.d/)下存在相关服务 2.将启动的程序写入到/etc/rc.local 选择建议: /etc/rc.local可以作为开机启动程 ...

  8. C. Friends

    C. Friends 题意 对于任一点,求到此点距离不超过6的节点数. 分析 第一次dfs,形成一个以 1 为根的有向树,设 down[i][j] 为以i为根节点,距离 i 点距离不超过 j 的节点数 ...

  9. Nginx上部署HTTPS

    Nginx上部署HTTPS依赖OpenSSL库和包含文件,即须先安装好libssl-dev,且ln -s /usr/lib/x86_64-linux-gnu/libssl.so  /usr/lib/, ...

  10. 解析PHP面向对象的三大特征

    class BenHang extends Card{ /*构造函数与及构造的继承*/ function __construct($cardno,$pwd, $name,$money){ parent ...