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 ...
随机推荐
- CemtOS7更改yum网易 阿里云的yum源。
一,鉴于用国外的Yum源,速度比较慢,所以想到将国外的yum源,改为国内的Yum源,著名的有网易 阿里云源.如何更改呢? 二,更改yum源为网易的. 首先备份/etc/yum.repos.d/Cent ...
- 使用PHP做分页查询（查询结果也显示为分页）
1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单.(加上条件,实现目标结果.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 代码，java_web
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- pythonのsimple_tag
当我们需要在页面种直接调用py文件中的某些方法时,我们就要用到simple_tag.具体步骤如下: 1.在某个app下创建templatetags文件夹,切记该名称是不可以改变的. 2.在该文件夹下创 ...
- 排序算法以及其java实现
一.术语了解 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面: 不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排序操作都在内存中完成: 外排序:由 ...
- django/python日志logging 的配置以及处理
日志在程序开发中是少不了的,通过日志我们可以分析到错误在什么地方,有什么异常.在生产环境下有很大的用处.在java 开发中通常用 log4j,logback 等三方组件.那么在 django中是怎么处 ...
- mysql 客户端连接报错Illegal mix of collations for operation
服务端用的是utf-8,客户端工具打开表和视图是会报Illegal mix of collations for operation错误,经排查,可以采用以下语句解决 SET character_set ...
- 史上最明白的 NULL、0、nullptr 区别分析（老师讲N篇都没讲明白的东东），今天终于明白了，如果和我一样以前不明白的可以好好的看看...
C的NULL 在C语言中,我们使用NULL表示空指针,也就是我们可以写如下代码: int *i = NULL; foo_t *f = NULL; 实际上在C语言中,NULL通常被定义为如下: #def ...
- Solr简单使用
1.添加索引 // 第一步:把solrJ的jar包添加到工程中. // 第二步:创建一个SolrServer,使用HttpSolrServer创建对象. SolrServer solrServer = ...
- linux SWAP
1.内存和SWAP之间合理的分配方案 M = Amount of RAM in GB, and S = Amount of swap in GB, then If M < 2, S = M *2 ...