大家都知道 使用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. maven私库nexus2.11.4迁移升级到nexus3.12.0

    nexus简介 nexus是一个强大的maven仓库管理器,它极大的简化了本地内部仓库的维护和外部仓库的访问. nexus是一套开箱即用的系统不需要数据库,它使用文件系统加Lucene来组织数据 .n ...

  2. react+antdesign

    http://scaffold.ant.design/#/scaffolds/ng-alain http://scaffold.ant.design/#/scaffolds/react-redux-a ...

  3. Contest2161 - 2019-3-21 高一noip基础知识点 测试4 题解版

    传送门 预计得分:100+100+100+10=310 实际得分:100+0+82+10=192 你们基础知识不行啊——by wxg T1 一看数据范围就是搜索 但是不能因为数据范围就断送了dp的心 ...

  4. js中精度问题以及解决方案

    js中的数字按照IEEE 754的标准,使用64位双精度浮点型来表示.其中符号位S,指数位E,尾数位M分别占了1,11,52位,并且在ES5规范中指出了指数位E的取值范围是[-1074, 971]. ...

  5. C# - Visual Studio简明操作

    Visual Studio简明操作 安装Northwind示例数据库 运行安装程序,结束安装后,再CMD中输入以下命令 cd C:\SQL Server  Sample Databases(回车) s ...

  6. 一、cryptsetup文件系统加密

    cryptsetup文件系统加密   今天做了SYC攻防题的文件系统挂载部分,在找到挂载最内层的final文件时发现mount无法识别,这也许就是一个加密的文件系统吧,还好-在龟速的 网络环境下查阅到 ...

  7. lnmp.org 安装环境的，root权限都没法删除网站文件夹，问题解决-转

    rm -rf删除网站目录时出现rm: cannot remove `.user.ini': Operation not permitted rm -rf删除网站目录时出现rm: cannot remo ...

  8. Atcoder Grand Contest 032

    打的第一场Atcoder,已经知道会被虐得很惨,但没有想到竟然只做出一题-- 思维急需提升. A - Limited Insertion 这题还是很签到的. 感觉正着做不好做,我们反着来,把加数变为删 ...

  9. C#中用ILMerge合并DLL和exe文件成一个exe文件或者DLL

    ILMerge是一个将多个.NET程序集合并到一个程序集中的实用程序.它既可以作为  开源使用,也可以作为NuGet包使用. 如果您在使用它时遇到任何问题,请与我们联系.(mbarnett _at_ ...

  10. linux命令进阶

    Though unconsciously,peple are indeed moving towards their destination.Slow as the progress seen fro ...