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( ...
随机推荐
- centos7上修改lv逻辑卷的大小
author:headsen chen date: 2019-03-18 15:24:22 1,查看 [root@localhost mnt]# df -h Filesystem Size Used ...
- Ubuntu下开启Mysql远程访问的方法
首先想说,JetProfiler对分析项目中MySQL问题以及优化,是个非常好的工具.但是看网上文章,中文介绍真的不多.是因为国内现在都不用MySQL了吗? 因为公司JetProfiler是共用的,安 ...
- js版的in_array的实现方法
这是一个JS版的判断数组内的元素的方法. var arr = ['a','b','c']; console.log(in_array('b',arr)); // true function in_ar ...
- JavaScript原型、闭包、继承和原型链等等总结
参考:http://www.cnblogs.com/wangfupeng1988/tag/%E5%8E%9F%E5%9E%8B%E9%93%BE/
- laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)
如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...
- Tensorflow一些常用基本概念与函数（1）
为了快速的熟悉TensorFlow编程,下面从一段简单的代码开始: import tensorflow as tf #定义‘符号’变量,也称为占位符 a = tf.placeholder(" ...
- AIX 网络设置
AIX使用命令修改网卡IP地址,永久生效 比如修改en0的ip地址.chdev -l en0 -a netaddr=192.168.1.100 -a netmask=255.255.255.0 -a ...
- Codeforces 1090B - LaTeX Expert - [字符串模拟][2018-2019 Russia Open High School Programming Contest Problem B]
题目链接:https://codeforces.com/contest/1090/problem/B Examplesstandard input The most famous characters ...
- UUID、GUID、SID、SUSID
1. UUID: (Universally Unique Identifier) 通用唯一标识符, 是一个标识符标准用于软件架构,由开放软件基金会(OSF)作为分布式计算环境(DCE)的一部分而制作的 ...
- javascript 回调 继承
var my = function (name,fn){ alert(name); ...