选项卡的制作和注意要点

说到选项卡。一開始我还真有点搞不懂怎么弄出来的,但一想事实上也比复杂啊。无非就是把事件和事件的范围给控制好即可了。

第一事件:事件就两个,鼠标放上去还有鼠标离开,即放上显示。离开隐藏。

第二事件的范围: 这是关键的所在吧,由于当你发现吧 控制好了以后有一个大的问题就是当鼠标离开选项卡选项的时候往下移动,则会出现选项卡消失。

所以。应该把事件的范围控制的大一些,即把整个选项卡还有内容包含起来。

以下是详细的操作代码。

01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>选项卡</title><link rel="stylesheet" type="text/css" href="./file/01.css"><script type="text/javascript" src="./file/jquery.js"></script><script type="text/javascript" src="./file/01.js"></script>
</head>
<body><div class="div_1" id="div_1"><div class="div_1_1">选项卡1</div><div class="div_1_1_1" id="div_1_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_2" id="div_2"><div class="div_2_1">选项卡2</div><div class="div_2_1_1" id="div_2_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_3" id="div_3"><div class="div_3_1">选项卡3</div><div class="div_3_1_1" id="div_3_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_4" id="div_4"><div class="div_4_1">选项卡3</div><div class="div_4_1_1" id="div_4_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_5" id="div_5"><div class="div_5_1">选项卡3</div><div class="div_5_1_1" id="div_5_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_6" id="div_6"><div class="div_6_1">选项卡3</div><div class="div_6_1_1" id="div_6_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_7" id="div_7"><div class="div_7_1">选项卡3</div><div class="div_7_1_1" id="div_7_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div><div class="div_8" id="div_8"><div class="div_8_1">选项卡3</div><div class="div_8_1_1" id="div_8_1_1"><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/><a href="#">111111111</a><br/></div></div>
</body>
</html>
01.css

body{background-color: #646464;
}
*{margin: 0px;padding: 0px;
}
.div_1{margin-left: 200px;width: 100px;height: 300px;float: left;
}
.div_2,.div_3,.div_4,.div_5,.div_6,.div_7,.div_8{margin-left: 20px;width: 100px;height: 300px;float: left;
}
.div_1_1,.div_2_1,.div_3_1,.div_4_1,.div_5_1,.div_6_1,.div_7_1,.div_8_1{background-color: black;width: 100px;height: 40px;color: white;
}
.div_1_1_1,.div_2_1_1,.div_3_1_1,.div_4_1_1,.div_5_1_1,.div_6_1_1,.div_7_1_1,.div_8_1_1{background-color: orange;width: 100px;height: 260px;display: none;
}
01.js:

$(document).ready(function(){$("#div_1").mouseover(function(){$("#div_1_1_1").css("display","block");});$("#div_1").mouseout(function(){$("#div_1_1_1").css("display","none");});$("#div_2").mouseover(function(){$("#div_2_1_1").css("display","block");});$("#div_2").mouseout(function(){$("#div_2_1_1").css("display","none");});$("#div_3").mouseover(function(){$("#div_3_1_1").css("display","block");});$("#div_3").mouseout(function(){$("#div_3_1_1").css("display","none");});$("#div_4").mouseover(function(){$("#div_4_1_1").css("display","block");});$("#div_4").mouseout(function(){$("#div_4_1_1").css("display","none");});$("#div_5").mouseover(function(){$("#div_5_1_1").css("display","block");});$("#div_5").mouseout(function(){$("#div_5_1_1").css("display","none");});$("#div_6").mouseover(function(){$("#div_6_1_1").css("display","block");});$("#div_6").mouseout(function(){$("#div_6_1_1").css("display","none");});$("#div_7").mouseover(function(){$("#div_7_1_1").css("display","block");});$("#div_7").mouseout(function(){$("#div_7_1_1").css("display","none");});$("#div_8").mouseover(function(){$("#div_8_1_1").css("display","block");});$("#div_8").mouseout(function(){$("#div_8_1_1").css("display","none");});
});




转载于:https://www.cnblogs.com/jzdwajue/p/6848136.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/400978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SqlSugar的开发框架循序渐进介绍(5)-- 在服务层使用接口注入方式实现IOC控制反转

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

Synergy如果timeout的可能原因

在使用Synergy的过程中&#xff0c;如果你确认你的server端和client端设置都正确&#xff0c;但是start之后client端一直显示超时&#xff0c;那么可能的一个原因是你的server和client不在同一个网段&#xff0c;比如一个直接是接的网线&#xff0c;一个用的是wifi&#xff0c;…

未将对象引用设置到对象的实例--可能出现的问题总结

一、网络上的一般说法 1、ViewState 对象为Null。2、DateSet 空。3、sql语句或Datebase的原因导致DataReader空。4、声明字符串变量时未赋空值就应用变量。5、未用new初始化对象。6、Session对象为空。7、对控件赋文本值时,值不存在。8、使用Request.QueryString()时,所获取的对…

最长回文子串 C++

在一个字符串中要到最长的回文子串&#xff0c;有如下方案&#xff0c;代码在最后。 最长回文子串的相关博文 1、暴力法 最容易想到的就是暴力破解&#xff0c;求出每一个子串&#xff0c;之后判断是不是回文&#xff0c;找到最长的那个。 求每一个子串时间复杂度O(N^2)&#x…

软件项目管理 3.5.敏捷生存期模型

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

altiumer designer学习

1.s快捷键&#xff0c;是进行多样的选择。 2.ctrls,是参看其中的一层。 3.选中器件后&#xff0c;右键点击选择align->position component text,可以选择desingator或者comment&#xff0c;有N种位置可以选择&#xff0c;这样器件的标注就统一在某一位置了. 4.转载于:https:…

烈焰SWF解密

SWF 解密 是用UE编辑器 改 SWF开头 的AA AA AA &#xff0c;改成43 57 53 就解密了

Promise总结

Promise解决什么问题 1. Promise解决了回调嵌套问题2. Promise提供了一些简单的流程控制&#xff0c;如Promise.all(全部完成),Promise.race(最先完成) 转载于:https://www.cnblogs.com/mengff/p/6854189.html

Anti-Forgery Request Recipes For ASP.NET MVC And AJAX 防伪验证,防伪请求

怎样在每一个action添加防伪验证 怎样在运行时指定非因定salt加密令牌 怎样在ajax场景带上服务端防伪验证 This post discusses solutions for anti-forgery request scenarios in ASP.NET MVC and AJAX: How to enable validation on controller, instead of on each action;H…

spark内核揭秘-02-spark集群概览

2019独角兽企业重金招聘Python工程师标准>>> Spark集群预览&#xff1a; 官方文档对spark集群的初步描述如下&#xff0c;这是一个典型的主从结构&#xff1a; 官方文档对spark集群中的一些关键点给出详细的指导&#xff1a; 其Worker的定义如下所示&#xff1a; 需…

使用docker创建和运行跨平台的容器化的mssql数据库

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

详解 Cookie 纪要(vue.cookie,jquery.cookie简化)

今天看到一篇cookie的文章&#xff0c;写的特别详细&#xff0c;感谢 晚晴幽草轩 的分享&#xff0c;原文链接http://www.jeffjade.com/2016/10/31/115-summary-of-cookie/ 原文如下&#xff0c;记录到此供以后查阅并希望好文章能被更多需要的人看到 背景 在HTTP协议的定义中&a…

八十中集训解题报告

&#xff08;持续更新中…………&#xff09; 去八十中被屠成渣了&#xff0c;被屠得毫无还手之力&#xff0c;被屠得丧心病狂&#xff0c;停都停不下来&#xff0c;于是只好来写写题解了。 题目在openjudge上都有&#xff0c;自己去翻。 Day 1&#xff1a; 第一题&#xff1a;…

cxf数据压缩

一、HTTP数据的压缩 在http协议中当content-encoding对应的值为gzip&#xff0c;deflate&#xff0c;x-gzip&#xff0c;x-deflate时&#xff0c;数据是经过了压缩之后再进行传输的。有些时候我们当我们传输的数据比较大的时候&#xff0c;可以采取这种方式&#xff0c;从而提高…

ER图

1、E-R图也称实体-联系图(Entity Relationship Diagram)&#xff0c;提供了表示实体类型、属性和联系的方法&#xff0c;用来描述现实世界的概念模型。2、它是描述现实世界概念结构模型的有效方法。是表示概念模型的一种方式&#xff0c;用矩形表示实体型&#xff0c;矩形框内写…

CXP 协议中upconnection 与downconnection的说明及其区别

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

事件接收器

今天温习了一下事件接收器&#xff0c;顺便记录一下。 1、用vs开发事件接收器&#xff0c;如果是针对列表或者列表项的&#xff0c;则不能够具体到某一列表&#xff1b;但是实际应用中大部分是要求具体到某一列表的&#xff0c;那怎么办呢&#xff1f;在这里本猪猪给大家推荐一…

python redis插件安装

#tar xvzf redis-py-2.2.1.tar.gz#cd redis-py-2.2.1#python setup.py install附件&#xff1a;https://app.yinxiang.com/shard/s41/res/689fcc84-4411-4ee6-b7a9-6bbaefb8a3b1/redis-py-2.2.1.tar.gz转载于:https://www.cnblogs.com/biboxie/p/4233318.html

Eclipse之文件【默认编码格式设置】,防止乱码等问题

文件默认编码格式设置步骤如下&#xff1a; 这里显示的是workspace的视图 其他格式文件的视图如下&#xff1a; 转载于:https://www.cnblogs.com/TCB-Java/p/6857923.html

浏览器上写代码,4核8G微软服务器免费用,Codespaces真香

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…