jquery简易tab切换
切换tab
使用eq()函数
eq() 方法将匹配元素集缩减值指定 index 上的一个。
//为项目 3 设置红色背景
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').eq(2).css('background-color', 'red');
eq(index)中index可为正数，负数（倒序），超过已有length（不显示）
eg
<style>
.container{
width: 400px;
margin: 40px auto
}
.title{
width: 100%;
border:1px solid black;
}
span{
width: 49%;
text-align: center;
display: inline-block;
cursor: pointer;
}
.current{
color:red
}
.content{
height: 200px;
background-color: aliceblue;
}
.content>div:nth-child(2){
display: none;
}
</style>
<body>
<div class="container">
<div class="title">
<span class="current">tab1</span>
<span>tab2</span>
</div>
<div class="content">
<div>tab1内容</div>
<div>tab2内容</div>
<div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//点击切换登录方式
$('.title').on('click','span',function () {
$(this).addClass('current');
$(this).siblings().removeClass('current');
var i =$(this).index();
$('.content>div').eq(i).show().siblings().hide();
})
</script>
效果如下
tab1
tab2
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切换
<!doctype html> <html> <head> <title>test</title> <meta content=&qu ...
- jquery 实现tab切换
大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码 <!DOCTYPE html> <html lang ...
- 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( ...
随机推荐
- linux shell下16进制 “\uxxxx” unicode to UTF-8中文
问题出现背景: 项目中有个通过ip获取归属地城市需求,我是直接通过新浪的ip归属查询接口来获取的.我使用的是shell脚本调用 RESULT=$(curl -s 'http://int.dpool.s ...
- 11 vs2015 连接oracle 11g 数据库及相关问题
1.下载Oracle Developer Tools for Visual Studio 2015 ,网址如下. http://www.oracle.com/technetwork/topics/do ...
- CF3A Shortest path of the king
The king is left alone on the chessboard. In spite of this loneliness, he doesn't lose heart, becaus ...
- Java 测试连接Oracle数据库是否成功，ojdbc7.jar包下载
需要用到的jar 包: 链接:https://pan.baidu.com/s/1I1pC2f81IvbphZ6tWpVFOg 密码:uq0u 测试结果: package pkg; import jav ...
- [ERROR] Terminal initialization failed; falling back to unsupported
Logging initialized using configuration in jar:file:/usr/local/hive/lib/hive-common-1.2.2.jar!/hive- ...
- 转载http协议
转载自:https://blog.csdn.net/weixin_38051694/article/details/77777010 1.说一下什么是Http协议 对器客户端和 服务器端之间数据传输的 ...
- [No0000197]Windows用户都应该知道的运行命令
通过"运行"命令,运行Windows丰富工具的方法.如果您知道工具或任务的相应"运行"命令,那么您就知道访问所述工具或任务的最快方法. 以下是我们最喜欢的Run ...
- linux命令：压缩解压打包工具大集合
目录 (1)zip 压缩.解压缩及归档工具有很多,今天小编就整理几个大家较为常用的. compress gzip bzip2 xz zip tar cpio 一.压缩.解压工具 用法 压缩 工具 压 ...
- Chrome扩展程序——TabCopy：一键复制网页标题和网址
Chrome扩展程序——TabCopy:一键复制网页标题和网址 - Erik_ly的博客 - CSDN博客 https://blog.csdn.net/u012318074/article/detai ...
- kubernetes 1.3 使用skydns + kube2dns +etcd部署DNS服务器
1. 直接从Docker中拉取skydns,kube2dns,etcd容器,放到一个Pod中 kube2sky:1.14 etcd:2.0.9 skydns-amd64 2. 创建RC apiVers ...