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来写样式)
请各位老师指正!^_^
转载于:https://www.cnblogs.com/gradolabs/p/jquery_tab.html
JQuery__Tab实践相关推荐
- Golang TDD实践报告:快速排序Quick Sort
Golang TDD实践报告:快速排序Quick Sort [阅读时间:约5分钟] 0.项目需求 1.编写符合项目输入输出的一个测试 2.尝试运行测试 3.先使用最少的代码来让失败的测试先跑起来 4. ...
- 编写高性能Java代码的最佳实践
编写高性能Java代码的最佳实践 摘要:本文首先介绍了负载测试.基于APM工具的应用程序和服务器监控,随后介绍了编写高性能Java代码的一些最佳实践.最后研究了JVM特定的调优技巧.数据库端的优化和架 ...
- 【K8S实践】关于Kubernetes Dashboard的实践学习
前言: 陆陆续续,学k8s一个月了,从开始看docker容器书,视频,怎么都无法上手:到后来闷着头实践地傻瓜式操作:到今天整个完全串通好!感觉到学习也是一段深刻的成长经历! 过程: 这个过程中使用的工 ...
- 提高期——SLA实践指导秘籍
前言: 第二遍看提高期的SLA文档,开始提高期的第一个项目. 感受: 这个秘籍和自己看的<番茄工作法图解>非常像,写作风格和内容量上. 从大脑的功能分析,为什么要这样做.我们的学习方法符合 ...
- Spring Data JPA 五分钟快速入门和实践
Spring Data JPA(类似于Java Web 中的 DAO) 操作声明持久层的接口(Repository) 三个核心接口: CrudRepository PagingAndSortingRe ...
- TVM优化c++部署实践
TVM优化c++部署实践 使用TVM导入神经网络模型: 模型支持pytorch , tensorflow , onnx, caffe 等.平时pytorch用的多,这里给一种pytorch的导入方式. ...
- Dockerfile构建实践
Dockerfile构建实践 本文介绍了用于构建有效图像的推荐最佳实践和方法. Docker通过从一个Dockerfile文本文件中读取指令来自动构建映像,该文本文件按顺序包含构建给定映像所需的所有命 ...
- Tensor基础实践
Tensor基础实践 飞桨(PaddlePaddle,以下简称Paddle)和其他深度学习框架一样,使用Tensor来表示数据,在神经网络中传递的数据均为Tensor. Tensor可以将其理解为多维 ...
- MindSpore模型精度调优实践
MindSpore模型精度调优实践 引论:在模型的开发过程中,精度达不到预期常常让人头疼.为了帮助用户解决模型调试调优的问题,为MindSpore量身定做了可视化调试调优组件:MindInsight. ...
最新文章
- tum robotics
- 安卓音乐播放器开发实例
- 代码组(1) 对代码组的管理
- 如何在Android平台下进行Socket通信
- Oracle 11g学习笔记(四)
- 判断线段和直线相交 POJ 3304
- Mybatis源码分析之(三)mapper接口底层原理(为什么不用写方法体就能访问到数据库)
- 计算机网络二级考试类型,二级计算机考试大纲
- vb脚本从入门到精通_sqlmap从入门到精通第七章720 绕过WAF脚本space2morecommentamp;space2morehash...
- 如何在缺乏商业项目经验的前提下成功通过面试,兼说我如何甄别非商业项目经验...
- 苹果手机绕id软件_苹果手机如何安装LINE社交软件
- 补充netty权威指南学习自定义协议实现,与springboot集成
- 色纯度(purity)主波长(WD)计算软件(升级版)
- VMware虚拟机安装Win10
- Mysql性能调优之max_allowed_packet
- HTML+CSS静态页面网页设计作业——甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
- 实验一 第2关:从自然数中取3个数进行组合之递归算法任务描述
- PDF文件怎么插入空白页面
- 项目中使用 husky 格式化代码和校验 commit 信息
- python实现微信机器人群发软件_Python自制微信机器人:群发消息、自动接收好友!...
热门文章
- Pytorch的优化器总结归纳
- 共赶鸿蒙是什么意思,鸿蒙见大家同意,就一起赶往紫霄宫,鸿钧一讲就是三千年...
- go语言刷题:77. 组合
- 硬盘突然变raw格式_磁盘分区变成RAW格式怎么办?手把手教你解决方法
- 用ENSP华为模拟器做图书馆得网络配置和设计
- 使用AD(Altium Designer)三年的笔记(虽然很口语化,但是好记性不如烂笔头嘛~开熏)
- java项目黑科技_这些Java编程黑科技,装逼指南,高逼格代码,让你惊叹不已
- cad画多段线时不显示轨迹_CAD显示不出所画线段的解决方法
- 【摘】WebGIS开发从入门到......
- 如何查看QQ在线人数