选项卡的制作和注意要点

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

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

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

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

以下是详细的操作代码。

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

选项卡的制作和注意要点相关推荐

网页设计HTML如何制作选项卡,jQuery制作网页版选项卡
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. ◦引入所需库 ◦选项卡原理 ◦业务核心 ◦完整小 ...
Css JavaScript jquery 实现选项卡的制作
阅读目录 Css 源码源码解析 JavaScript 源码 JavaScript 源码解析 jQuery源码 jQuery 源码解析 Css 源码 <!DOCTYPE html> < ...
axure没有团队页签_Axure教程：多页签可滚动的选项卡制作
这就是我下面要分享给大家的内容啦: 首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程. 一.最常见的传统选项卡最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签 ...
JQuery 网页选项卡制作
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库选项卡原理业务核心完整小例子引 ...
axure没有团队页签_Axure教程：多页签可滚动的选项卡制作（附源文件下载）
选项卡,就是用多个页签来切换展示不同的功能页面,通过点击相应页签来切换相应选项卡页面的效果,相信大家在绘制原型中常常会遇到,并不陌生.但是如何优化选项卡的展示效果?以及如果选项卡过多,如何做到像真正系 ...
【笔记】与Android选项卡一周
果然,还是项目驱动的学习方式比较有趣呢. 这周的学习全部围绕着选项卡,也就是tab. 用到了好多知识点,都不知道从哪里开始啦(≧o≦*). 选项卡的制作有很多方法.选项菜单可以用普通的TextView ...
一线PPT制作理论——简洁电磁环境构建
在XXXX研究所X室"PPT制作交流会"上的分享西北工业大学李宽 (南京,2012年4月29日上午) 零大家好!我是西北工业大学软件与微电子学院本科四年级的学生李宽.在这半个月 ...
HTML制作年历,js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己 ...
jquery实现tab切换加自动滚动切换
1.用插件switchTab $("#switchBox7").switchTab({defaultIndex: "1", titCell: "dt ...

选项卡的制作和注意要点

选项卡的制作和注意要点相关推荐

最新文章

热门文章