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 ...
随机推荐
- Arduino传感器学习目录
Arduino-接口图 在Windows上安装Arduino-IDE 函数库和程序架构介绍 Arduino语法-变量和常量 Arduino常用的数据类型以及转换 Arduino—运算符 ...
- CCPC-Wannafly Winter Camp Day5 (Div2, onsite) Sorting(线段树)
题目链接 题意 对序列进行三种操作: 1.区间求和. 2.将区间小于等于$x$的数不改变相对顺序的前提下放到$x$左边,用同样规则将比$x$大的放到右边. 3.将区间大于$x$的数不改变相对顺序的前提 ...
- Ansible------角色
什么是角色 角色是一种解决问题的思想,也是一种规范. 目录 角色的目录结构如下: files: 存放由copy或script模块等调用的文件. templates: template模块查找所需要模板 ...
- maven 一些整理
1.发布jar包到私服,需要进入项目目录 发布jar :mvn deploy 发布源码 :mvn source:jar deploy,这个需要依赖一个maven插件: <plugin> ...
- mac使用apktool打包回apk
升级最新版的apktool 下载目录:https://ibotpeaches.github.io/Apktool/install/. 权限修改 将上述的文件放在usr/local/bin目录下并执行 ...
- Lua的内存管理
[前言] 在历史长河中,各种各样的新语言,总是伴随着我们编程人员:有的时候,工作的需要,我们不得不去学习这些很炫的,很新的语言.学习任何一门语言(我这里只说学习),都无非就是学习那么几个大模块,基本语 ...
- Maven全局配置
Maven的全局配置文件是Maven安装目录conf/settings.xml文件,该文件可以配置仓库.代理.profile.镜像.插件等 <settings> <localRepo ...
- spring security 简单应用
Pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:// ...
- 纯css画直角三角形
所有的三角形,都是通过盒子模型来设定. border(边框)的不同大小来决定 border-width: 边框的宽度 border-style: 边框的样式 border-color: 边框的颜色 1 ...
- 安装elasticsearch-7.0.0(centos)
云主机上需设置root密码 sudo passwd root 回车后出入密码两次 jdk11页面 https://www.oracle.com/technetwork/java/javase/down ...