大家都知道 使用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. VIM --使用进阶 -- 插件篇 -- YouCompleteMe -- nerdtree

    系统:ubuntu: 资源:https://github.com/ 其他:想了解都要哪些好用的插件,推荐大家读 http://blog.csdn.net/mergerly/article/detail ...

  2. sessionStorage：写入记事本功能[内容写入sessionStorage中，读取，删除]

    知识点: 1.设置sessionStorage----setItem:sessionStorage.setItem(key,data); 存储数据使用key是唯一,不可重复,每触发都生成:如用一个固定 ...

  3. vue组件化的应用

    前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个 ...

  4. ZH奶酪：Ubuntu 14.04安装LAMP(Linux，Apache，MySQL，PHP)

    (Linux Operating System,Apache Web Server,MySQL database,PHP) 首先,一个三行命令搞定的方法: sudo apt-get update su ...

  5. auto类型说明符

    auto让编译器通过出初始值来推算变量的类型,显然,auto定义的变量必须有初始值: //由val1和val2相加的结果可以推断出item的类型 auto item = val1 + val2;//i ...

  6. pt-online-schema-change VS oak-online-alter-table【转】

    前言 在上篇文章中提到了MySQL 5.6 Online DDL,如果是MySQL 5.5的版本在DDL方面是要付出代价的,虽然已经有了Fast index Creation,但是在添加字段还是会锁表 ...

  7. O2O、B2B、C2C（通俗讲解）

    你在地摊买东西,C2C你去超市买东西,B2C超市找经销商进货,B2B超市出租柜台给经销商卖东西,B2B2C你在网上下载个优惠券去KFC消费,O2O 一:O2O 1.概念: O2O即Online To ...

  8. SQL join 连接时 条件加在 on后面和 where 的区别

    task 是用户任务表,manageuser是用户表,以left join 为参考: 此时主表是task,三条sql语句:注意区别.第一句无筛选条件,第二句筛选条件在on后面,第三句sql的筛选语句放 ...

  9. 第一周——数据分析之表示 —— Numpy入门

    数据的维度 从一个数据到一组数据 一个数据:表达一个含义 一组数据:表达一个或者多个含义 维度:一组数据的组织形式 一维数据 由对等关系的有序或者无序数据构成,采用线性方式组织,对应列表.数组和集合等 ...

  10. iOS 中的屏幕旋转shouldAutorotate和supportedInterfaceOrientations的先后关系

    这2个UIViewController的属性,都和旋转相关, 当设备发生旋转时,首先会查看根controller的shouldAutorotate是否允许旋转,如果允许,再通过 supportedIn ...