大家都知道 使用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. 【转】史上最详细的Composer安装tp5教程

    http://www.thinkphp.cn/topic/52362.html Composer安装tp5教程1.下载composer先介绍几个网站Composer官网https://getcompo ...

  2. 迅为iTOP-4418/6818开发板-驱动-实现GPIO扩展

    实现 GPIO 扩展,先弄清楚“复用”的概念,将调用这些 GPIO 的驱动去掉配置,重新编译,加到自己的驱动中,就可以实现扩展的 GPIO 的输入和输出.另外必须要先看文档“迅为iTOP-4418开发 ...

  3. 第八节,Opencv的基本使用------存取图像、视频功能、简单信息标注工具

    1.存取图像 import cv2 img=cv2.imread('test.jpg') cv2.imwrite('test1.jpg',img) 2.图像的仿射变换 图像的仿射变换涉及图像的形状位置 ...

  4. cefsharp解决闪烁

    CefSharp禁用GPU的命令行参数 其中,Major和Minor分别指代系统的主版本(大版本).次版本(小版本)版本号.其中指定了Windows7系统会禁用 GPU.,突发奇想,是否windows ...

  5. RFB Net笔记

    ECCV2018 论文:Receptive Field Block Net for Accurate and Fast Object Detection 论文链接:https://arxiv.org/ ...

  6. P2947 [USACO09MAR]向右看齐Look Up--单调栈

    单调栈真的很好用呢! P2947 [USACO09MAR]向右看齐Look Up 题目描述 Farmer John's N (1 <= N <= 100,000) cows, conven ...

  7. python 学习第四天

    2.5列表list. 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = ...

  8. 最新版 IntelliJ IDEA2018.3.x 破解教程

    https://www.cnblogs.com/Candies/p/10050831.html

  9. javascript/jquery获取url地址栏参数的方法

    简洁jq方法获取url地址栏的参数 function getQueryVariable(variable){ var query = window.location.search.substring( ...

  10. 安装 Docker <一>

    一.docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制, ...