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( ...
随机推荐
- Python yield 函数功能
python中有一个非常有用的语法叫做生成器,所利用到的关键字就是yield.有效利用生成器这个工具可以有效地节约系统资源,避免不必要的内存占用. 一段代码 def test_dict_sort(): ...
- 对unicode数据进行部分replace
unicode = u'\u9879\u76ee\u7ba1\u7406\u90e8' print unicode #项目管理部 unicode = unicode.replace("项目& ...
- threding模块的其他用法
import threading import time def func(n): time.sleep(0.5) n += 1 print(n, threading.current_thread() ...
- E - Stones 优先队列
来源1896 Because of the wrong status of the bicycle, Sempr begin to walk east to west every morning an ...
- iOS Icon Size 快速得到三种大小的图标
在iOS开发中,按钮图标可以放三种大小,常见的是22x22,44x44,66x66,一般来说我们可以在PS中做好图片后,再分别导出三种大小的图标,但是每次要修改图片的大小,操作比较繁琐.这里博主推荐一 ...
- 2017-2018 ACM-ICPC Latin American Regional Programming Contest GYM101889
挺有意思的一套题,题也没有啥毒瘤了,本来是队切的结果种种原因大家全挂机了. 只补了百人题,一共7个,其他的暂时先不补了,,也不会嘛qwq H:签到 #include <bits/stdc++.h ...
- windows 安装 Apache、php、mysql及其配置(转载)
此文包括的注意内容:软件版本及下载地址Apache2.4的配置和安装php7.0的配置mysql5.5的安装常见问题及解决方法1.软件版本Windows server 2008 r2+ 64位Apac ...
- mysql5.7 yum安装
1.在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo/yum/ wget http://dev.mysql.com/get/mysql ...
- ExecuteExcel4Macro (宏函数)使用说明
用ExecuteExcel4Macro从未打开的Excel工作簿中读取数据(转载) 从另外一个未打开的Excel文件中读取数据的函数 下面这个函数调用XLM宏从未打开的工作簿中读取数据. *注意: ...
- jQuery 中的 39 个技巧【申明：来源于网络】
jQuery 中的 39 个技巧[申明:来源于网络] 地址:http://blog.csdn.net/zhongqi2513/article/details/53704812?ref=myread