JQuery__Tab实践
刚开始学做网站的时候,是从DIV+CSS开始的,那时候不明白“幻灯片”“二级导航”等,更不明白“动态网站”。后来,需要用到幻灯片banner的时候,老师没有仔细讲解JS,就说:从网站找来,会用就好!于是在接下来的两年后的今天,我都只是“会用”,从没有去研究过实现的原理,前几天去面试的时候,让我做个Tab,我硬是没有做出来(╰_╯)。所以回来以后痛定思痛,决定沉下心来好好锻炼,于是就有了这个博客。第一次写,请各位老师指点,不管是写博客还是学JS,我都是个新手,O(∩_∩)O哈哈~
<------以上废话可以跳过----->
思路:Tab包括两个部分:List & Content,在List中触发某事件(hover、click等),Content中对应的部分显示出来,其他隐藏。先把结构写出来:
<div class="tab">
<ul class="list">
<li class="on">1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
<!--<div class="content">-->
<div class="block">1st content</div>
<div class="hide">2nd content</div>
<div class="hide">3rd content</div>
<!--</div>-->
</div>
div.content被我取消掉了,主要是多余,写上去只是为了结构上更好区分。
在没有JS的情况下(考虑用户禁用JS),针对第一个List给予对应的.on样式表示当前选中,对应的内容中,也给第一个.block样式display:block(其实可以不要,默认显示就好了);其他两个给予.hide样式display:none;
接下来,咱们开始写Jquery部分:
首先,针对List部分,鼠标移动到对应的<li>标签上,给该<li>标签加上.on样式,并且把跟他同一辈的<li>标签去掉.on样式;
$(document).ready(function(){ $(".tab li").hover(function(){ $(this).addClass("on").siblings().removeClass("on"); }); })
接下来,思考一下:选择第一个<li>就显示第一个<div>,选择第二个就显示对应的第二个<div>…………那么这之间就有一个关联的数值,只要获得该<li>的位置值,然后把这个值用来查找对应的<div>,找到后给该<div>添加.block样式,并且同辈的<div>添加.hide样式就好了;
那么,获取<li>的位置用什么方法呢?想了半天不知道-.-||,只好去查找文档了,很幸运,就是它:index();
来看一下index()的说明:
index([selector|element])
概述
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
具体请参考示例。
参数
index() V1.4
selector Selector V14
一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。
element Element V1.0
获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。
那么,就下来就继续Jquery吧:
$(document).ready(function(){ $(".tab>ul>li").hover(function(){ var siteval = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $(".tab>div").eq(siteval).removeClass("hide").siblings("div").addClass("hide"); }); })
Jquery的兼容性就不说了,找了chrome、ff、IE6试了下,没问题;
接下来,为了能让页面中多处调用,避免重复写代码,那就把这个东西写为一个函数,需要的时候实例化一个就好了;
$(document).ready(function(){ function showTab(n){ $(n+">ul>li").hover(function(){ var siteval = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $(n+">div").eq(siteval).removeClass("hide").siblings("div").addClass("hide"); }); }; showTab(".tab");
showTab(".tabs"); })
需要再用到tab的时候,就实例化一个就好了,比如:showTab(".tabs");
在选择子元素的时候使用了”A>B“的方式,听说这样遍历得少,性能好一些。
最后留下的问题:同一个页面两个结构完全相同的tab,无法共用,不然也不至于需要再次实例化甚至不用写成一个方法,并且样式类名不同,导致样式可能要多写(解决方法:单独用一个class或者id来写样式)
请各位老师指正!^_^
JQuery__Tab实践的更多相关文章
- webp图片实践之路
最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- TDD在Unity3D游戏项目开发中的实践
0x00 前言 关于TDD测试驱动开发的文章已经有很多了,但是在游戏开发尤其是使用Unity3D开发游戏时,却听不到特别多关于TDD的声音.那么本文就来简单聊一聊TDD如何在U3D项目中使用以及如何使 ...
- Logstash实践: 分布式系统的日志监控
文/赵杰 2015.11.04 1. 前言 服务端日志你有多重视? 我们没有日志 有日志,但基本不去控制需要输出的内容 经常微调日志,只输出我们想看和有用的 经常监控日志,一方面帮助日志微调,一方面及 ...
- 【大型网站技术实践】初级篇:借助Nginx搭建反向代理服务器
一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...
- Windows平台分布式架构实践 - 负载均衡
概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...
- Mysql事务探索及其在Django中的实践(二)
继上一篇<Mysql事务探索及其在Django中的实践(一)>交代完问题的背景和Mysql事务基础后,这一篇主要想介绍一下事务在Django中的使用以及实际应用给我们带来的效率提升. 首先 ...
- Mysql事务探索及其在Django中的实践(一)
前言 很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...
- netty5 HTTP协议栈浅析与实践
一.说在前面的话 前段时间,工作上需要做一个针对视频质量的统计分析系统,各端(PC端.移动端和 WEB端)将视频质量数据放在一个 HTTP 请求中上报到服务器,服务器对数据进行解析.分拣后从不同的 ...
随机推荐
- X86架构与ARM架构比较
引言 CPU是怎样运作的? CPU的运作与人脑的运作差不多.先谈一下人这个系统的工作方式.眼镜.耳朵.舌头.皮肤等等感觉器官接收到“触觉”,把信息传给大脑,大脑把信息处理后,把处理结果送给手.脚.嘴等 ...
- Redux1
Redux 写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何 ...
- opencv 2.46与visual studio 2012 配置方法
一开学就搞实训,还是没学过的图像处理.痛苦啊!图像处理时一般使用Matlab中的图像工具箱,或者是C/C++和OpenCV结合使用.以前看过一些关于opencv的文章,没想到现在要用上了. 把搭建开发 ...
- inux 下c/c++ 连接mysql数据库全过程-----已经通过验证
安装Mysql(还可以下载 .gz包,解压安装,再此只介绍此法,其实都一样了,或百度一下...重点在下下下下面) 1.首先安装Mysql服务器 sudo apt-get install mysql-s ...
- Network Saboteur
poj2531:http://poj.org/problem?id=2531 题意:给你一个图,图中点之间会有边权,现在问题是把图分成两部分,使得两部分之间边权之和最大.题解:一开始比知道怎么办,想用 ...
- Building a Space Station
poj2031:http://poj.org/problem?id=2031 题意:就是给出三维坐标系上的一些球的球心坐标和其半径,搭建通路,使得他们能够相互连通.如果两个球有重叠的部分则算为已连通, ...
- hdu 5072 Coprime
http://acm.hdu.edu.cn/showproblem.php?pid=5072 题意:给出 n 个互不相同的数,求满足以下条件的三元无序组的个数:要么两两互质要么两两不互质. 思路:根据 ...
- php socket 通信
Socket扩展是基于流行的BSD sockets,实现了和socket通讯功能的底层接口,它可以和客户端一样当做一个socket服务器. 想了解更通用的客户端socket接口,请看 stream_s ...
- oralce 仅配置精简客户端 连接plsql ( 版本需一直,要不都是32要不是都是64)
1.Oracle服务器已经安装完成,版本10.2.0. 2.访问www.oracle.com,下载Oracle精简客户端. 下载页面地址:http://www.oracle.com/technetwo ...
- Mysql 数字类型转换函数
.将Int 转为varchar经常用 concat函数,比如concat(,' .将varchar 转为Int 用 cast(a as signed) a为varchar类型的字符串 总结:类型转换和 ...