大家都知道 使用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. 论文阅读笔记：《Contextual String Embeddings for Sequence Labeling》

    文章引起我关注的主要原因是在CoNLL03 NER的F1值超过BERT达到了93.09左右,名副其实的state-of-art.考虑到BERT训练的数据量和参数量都极大,而该文方法只用一个GPU训了一 ...

  2. 近日测试发现所有Excel相关功能均会抛异常，查后发现与福昕阅读器不兼容

    报这种错: System.Runtime.InteropServices.COMException (0x80010105): 服务器出现意外情况. (异常来自 HRESULT:0x80010105 ...

  3. dos.orm

    引言: Dos.ORM(原Hxj.Data)于2009年发布.2015年正式开源,该组件已在数百个成熟项目中应用,是目前国内用户量最大.最活跃.最完善的国产ORM.初期开发过程中参考了NBear与My ...

  4. vue-cli3.0 项目如何使用sass

    执行: npm install node-sass --save-dev npm install sass-loader --save-dev 自动安装sass,vue-cli3.0 不需要在 web ...

  5. python学习第21天

    type和类 继承 抽象类 接口类 多态 java 鸭子类型 pickle模块 collections.namedtuple

  6. 利用jQuery如何获取当前被点击的按钮

    如下代码 <tr> <td><a href="javascript:void(0)">点我1</a></td> < ...

  7. vue静态文件处理

    前言: vue-cli在创建项目的时候, 会创建两个存放静态文件的目录, 1. src/assets 2. /static 这两个文件夹在项目中的作用和区别是什么, 我们今天就来看一下 静态资源处理: ...

  8. IDEA打包jar包

    1.点击idea左边的Maven 2.点开要打包的项目下的-->Lifecycle-->双击package 3.jar包会默认保存在项目下的target文件夹下

  9. Jmeter性能测试之进阶Java request的使用

    在IDE中引用Jmeter的安装目录lib/ext中两个文件ApacheJMeter_core.jar和ApacheJMeter_java.jar Java request的类需要继承Abstract ...

  10. Java获取Ip发送邮件

    import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils; import javax.servlet. ...