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. 关于16年2月14日以后上传AppStore出现:Missing iOS Distribution signing identity for...的问题

    2016年2月14日以后打包上传AppStore会发现出现如下的问题: 导致问题的原因是:下边这个证书过期了 以下是苹果官方给出的回应: Thanks for bringing this to the ...

  2. [异常解决] android studio检测不到手机的解决办法——ADB驱动自己安装

    用android studio搭建安卓开发环境比eclipse简单的多,仅仅下载一个1个G左右的安装包安装即可. 安装好之后随便建一个hello world工程,想用实体手机调试要点: 选择USB设备 ...

  3. Java提高篇---TreeMap

    TreeMap的实现是红黑树算法的实现,所以要了解TreeMap就必须对红黑树有一定的了解,其实这篇博文的名字叫做:根据红黑树的算法来分析TreeMap的实现,但是为了与Java提高篇系列博文保持一致 ...

  4. C#基础练习(时间的三连击)

    Form1的后台代码: namespace _07事件的三连击 {     public partial class Form1 : Form     {         public Form1() ...

  5. sqlserver 中的GUID 全局唯一标识 -摘自网络

    --简单实用全局唯一标识 DECLARE @myid uniqueidentifierSET @myid = NEWID()PRINT 'Value of @myid is: '+ CONVERT(v ...

  6. DOUAudioStreamer 中kqueue的应用

    DOUAudioStreamer是一个基于Core Audio的流式音频播放器,其中的DOUAudioEventLoop通过kqueue来控制音频的各种状态. kqueue简介(详情请看官方manua ...

  7. Android项目实战(五十四):zxing 生成二维码图片去除白色内边距的解决方案

    目录:zxing->encoding->EncodingHandler类 中修改 createQRCode方法 private static final int BLACK = 0xff0 ...

  8. session和cookies

    Cookie 与session的产生过程                                 我们都知道HTTP协议本身是无状态的,客户只需要简单的向服务器来发送请求下载某些文件,客户端向 ...

  9. BZOJ2333 [SCOI2011]棘手的操作 堆 左偏树 可并堆

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2333 题意概括 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i ...

  10. security.php

    <?php /** * */ class Security { public function csrf_verify() { if(count($_POST) == 0) { return ' ...