大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

.container{

width: 600px;

margin: 20px;

overflow: hidden;

}

.tabsMenu  a{

display: inline-block;

margin: 0;

padding: 10px 40px;

cursor: pointer;

background: #f2f2f2;

color: #464646;

font-size: 16px;

font-weight: 400;

text-decoration: none;

}

.tabsMenu .active{

display: inline-block;

background: #749dcf;

color: #ffffff;

}

.tabContent{

width: 100%;

height: 300px;

background: #cccccc;

padding: 10px;

}

.hide{

display: none;

}

</style>

</head>

<body>

<div class="container">

<div class="tabsMenu">

<a href="javascript:;" class="active">111</a>

<a href="javascript:;">222</a>

<a href="javascript:;">333</a>

</div>

<div class="tabContent">

<div class="activeDiv">tab1111</div>

<div class="activeDiv hide" >tab2222</div>

<div class="activeDiv hide" >tab3333</div>

</div>

</div>

<script src="http://code.jquery.com/jquery-1.4.1.js"></script>

<script>

$(".tabsMenu a").click(function () {

$(this).addClass("active").siblings().removeClass("active");

$(".tabContent .activeDiv").hide().eq($(".tabsMenu a").index(this)).show();

})

</script>

</body>

</html>

jquery 实现tab切换的更多相关文章

  1. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  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. Python DB operation

    mysql http://www.cnblogs.com/zhangzhu/archive/2013/07/04/3172486.html 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目 ...

  2. du---查看文件夹大小-并按大小进行排序

    使用df 命令查看当前磁盘使用情况: df -lh [root@gaea-dev-xjqxz-3 ~]$ df -lh Filesystem Size Used Avail Use% Mounted ...

  3. if判断中的true和false

    真值指的是在 布尔值 上下文中转换后(使用强制类型转换)的值为真的值.所有值都是真值,除非它们被定义为 falsy (即除了 false,0,"",null,undefined 和 ...

  4. pythonのdjango

    Django(醤糕) 是基于MTV的框架 安装: pip3 install django 重要性:相当于出门带不带腿 创建工程 django-admin startproject [工程名称] 工程目 ...

  5. rest_framework框架的认识

    它是基于Django的,帮助我们快速开发符合RESTful规范的接口框架. 一  路由 可以通过路由as_view()传参 根据请求方式的不同执行对应不同的方法 在routers模块下 封装了很多关于 ...

  6. RTF文件格式

    文档地址 首先给出一个生成最简单的RTF文件的脚本 f=open('hello_world.rtf','w') padding='{\\rtf1\\ansi' padding+=' Hello Wor ...

  7. 非root用户安装java版本

    有时候,我们所用的用户并不是root用户,升级java版本,其实是一个非常简单的过程,具体过程如下: 将下载好的tar包进行解压,然后进行配置文件,在命令行敲入  vi ~/.bashrc,在这个文件 ...

  8. MS SQL Server 时间函数

    日期和时间数据类型 数据类型 存储(字节) 日期范围 精确度 格式示例 DateTime 8 1753年1月1日 - 9999年12月31日 3 1/3毫秒 yyyy-MM-dd hh:mm:ss.n ...

  9. 【原创】大叔经验分享（15）spark sql limit实现原理

    之前讨论过hive中limit的实现,详见 https://www.cnblogs.com/barneywill/p/10109217.html下面看spark sql中limit的实现,首先看执行计 ...

  10. pyhton图片合成模块-PIL

    文章链接:https://www.cnblogs.com/lilinwei340/p/6474170.html python PIL实现图片合成   在项目中需要将两张图片合在一起.遇到两种情况,一种 ...