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 ...
随机推荐
- sonarqube6.7部署文档
应用介绍:sonarqube是一个用于代码质量管理的开源平台,用于管理源代码的质量通过插件形式:可以支持包括Java.C#/C++.PL/SQL.Cobol.javascrip.Groovy等等二十几 ...
- Groovy 设计模式 -- 责任链模式
Chain of Responsibility Pattern http://groovy-lang.org/design-patterns.html#_chain_of_responsibility ...
- jQuery.rotate.js（控制图片转动）
jQuery.rotate.js笔记 1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...
- 基于VC的MFC界面开发
教你熟悉VC6.0创建一个可视化软件的过程 UpdateData(TRUE);//将输入数据赋给文本框变量. UpdateData(FALSE);//将内容显示在文本框中 AfxMessageBox( ...
- lucene学习的小结
pom.xml设置 <dependency> <groupId>junit</groupId> <artifactId>junit</artifa ...
- BETA 版冲刺前准备（团队）
过去存在的问题 文档问题 未能事先做好设计文档,且小程序与后端数据库接口存在问题 界面问题 原型图设计花的时间较少,小程序设计界面仍相对粗糙,前端成员css元素应用经验不足 小程序界面之间对接存在问题 ...
- 点击页面上的元素，页面删除removeChild()
简单描述:最近做了一个图片上传,上传完成回显图片的时候,需要用到点击图片,从页面删除的效果,然后就找到了removeChild()方法,说实话,我刚看到的时候,就觉得这个问题已经解决了,但是却发现这个 ...
- Spring设置定时任务时，关于执行时间的规则设置
been需要在xml文件中进行配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE bean ...
- Git一些简单但非常重要并常用的操作命令
1.将本地与github进行关联配置 生成公钥 ssh-keygen -t rsa -C "jiasheng.mei@hpe.com" 将公钥拷贝到github中 在公钥同文件夹( ...
- min-max容斥 hdu 4336 && [BZOJ4036] 按位或
题解: 之前听说过这个东西但没有学 令$max(S)$表示S中编号最大的元素,$min(S)$表示编号中最小的元素 $$max(S)=\sum{T \in S} {(-1)}^{|T|+1} min( ...