jquery 实现tab切换
大家都知道 使用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切换的更多相关文章
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- JQuery实现tab切换
JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...
- jquery简易tab切换
切换tab 使用eq()函数 eq() 方法将匹配元素集缩减值指定 index 上的一个. //为项目 3 设置红色背景 <ul> <li>list item 1</li ...
- jQuery带tab切换搜索框样式代码
效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...
- 简单的jquery实现tab切换
$(document).ready(function(){ $(".nav-menu-ctn").find("a").click(function(){ $(t ...
- jquery版tab切换效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 通过jquery实现tab切换
//css代码 *{ margin: 0; padding: 0; } #box{ margin: 0 auto; width: 800px; border: 5px solid #000000; o ...
- jquery写tab切换,三行代码搞定
<script type="text/javascript"> $("button").on("click",function( ...
- JQuery 实现 Tab 切换 index
$(function(){ var h_new=$('.new h4 a'); var new_dl=$('.new dl'); new_dl.first().show(); h_new.mousee ...
随机推荐
- EffectiveC++ 第3章 资源管理
我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 3 资源管理 条款13: 以对象管理资源 有时即使你顺 ...
- MyEclipse编码方式设置
1.windows -> Preferences -> general -> Workspace:
- 迅为iTOP-4418开发板-Android5.1系统编译补充
基于iTOP-4418开发板-Android5.1系统编译补充 5.6 编译-20181225 日期之后的源码 本文档补充介绍 4418 编译网盘目录 “J:\局域网共享_阮\iTOP4418 开发板 ...
- apache中 sed 指定文件中某字符串增加行
#!/bin/bash #在 servername 域名 字符串后面添加指定字符串 servername=`grep ServerName httpd-vhosts.conf |awk '{print ...
- Linux负载查询定位工具
1 uptime命令,负载查询命令 02:34:03 // 当前时间up 2 days, 20:14 // 系统运行时间1 user // 正在登录用户数 而最后三个数字呢,依次则是过去 1 分钟.5 ...
- 转-filebeat 源码分析
背景 在基于elk的日志系统中,filebeat几乎是其中必不可少的一个组件,例外是使用性能较差的logstash file input插件或自己造个功能类似的轮子:). 在使用和了解filebeat ...
- 小程序引入百度api天气预报
先看下最终的效果(默认可以获得未来三天数据): 第一:首先准备条件(必须): 1.小程序已认证,有appID 2.必须把https://api.map.baidu.com 添加到小程序的合法域名列表中 ...
- Vofuria ARCamera相机问题
想要发射 射线 Camera.allCameras[0] 该语句来选择相机:Camera.main 此语句只能找到Tag为MainCamera的相机:
- windows环境jprofiler配置监控tomcat
1.点击jprofiler/bin/jprofiler.exe文件安装 2.安装后将C:\Users\Administrator\.jprofiler8\config.xml文件复制到指定文件下,如: ...
- Java Spring Boot VS .NetCore （十一）自定义标签 Java Tag Freemarker VS .NetCore Tag TagHelper
Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...