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 ...
随机推荐
- 软件测试之adb命令-实际公司使用场景--今日log
软件测试之adb命令-实际公司使用场景--今日log Dotest-董浩整理 1)可以看内存泄漏: 2)可以安装.卸载app--截图并提交bug: 3)可以通过抓app日志定位问题: 4)可以结合mo ...
- pythonのsimple_tag
当我们需要在页面种直接调用py文件中的某些方法时,我们就要用到simple_tag.具体步骤如下: 1.在某个app下创建templatetags文件夹,切记该名称是不可以改变的. 2.在该文件夹下创 ...
- Gulp实战
推荐文章: gulp.js中文网 : http://www.gulpjs.com.cn/ DBPOO : http://www.dbpoo.com/getting- ...
- 【easy】202. Happy Number
happy number Write an algorithm to determine if a number is "happy". A happy number is a n ...
- linun 乌班图 vim : 依赖: vim-common (= 2:7.3.429-2ubuntu2) 但是 2:7.3.429-2ubuntu2.1 正要被安装
sudo apt-get purge vim-common sudo apt-get updatesudo apt-get upgradesudo apt-get install vim
- Allegro PCB Design GXL (legacy) 设置自动保存brd文件
Allegro PCB Design GXL (legacy) version 16.6-2015 菜单Setup > User Preferences... 在User Preferences ...
- word 内容控件属性编辑
场景: 别人发给自己一份word模板,基于统一性,里面包含了很多“内容控件”,一般情况下,只需要根据内容控件进行编辑即可,但如果想对内容控件本身做编辑操作,例如删除等. 操作: 单击 文件>选项 ...
- 金蝶k/3 K3云之家消息查询发送是否成功SQL语句
金蝶k/3 K3云之家消息查询发送是否成功SQL语句 1是成功,0是还在轮询中未发送,4是发送失败 select * into #tempUserID from ( union select t_Gr ...
- 金蝶k/3 K3密码对照破解源码
金蝶k/3 K3密码对照破解源码 通过密码对照表进行密码破解 以下是源码: VERSION 5.00 Object = "{0ECD9B60-23AA-11D0-B351-00A0C9055 ...
- Java Spring Boot VS .NetCore （一）来一个简单的 Hello World
系列文章 Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filte ...