长沙网站建设--常用的选项卡效果实例

技术|蒲公英2017-09-16阅读:999

大家都知道,网站首页是一个网站的入口网页,故往往会被编辑得易于了解该网站,并引导互联网用户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容。因为网站的首页在整个网站中起到了非常重要的作用。
而网站是否美观,是否实用,跟首页的设计是息息相关的,而现如今,众多网站上首页的着重点越来越高,针对于首页的设计以及各类效果更是层出不穷。
今天主要跟大家讲解一下,首页常用到的JS效果之选项卡特效。
在诸多网页上,除了特定的切换效果,滑出特效之外,最常用的莫过于选项卡特效了,如下图。在首页中的其中一屏,既需要展示工程业绩下幕墙工程的数据,又需要展示门窗工程的数据,而且不能超出已规划好的特定区域,那么这时候就需要用到选项卡效果了,也就是说在页面上默认展示其中一个栏目的数据,当鼠标滑过另一个栏目时,默认展示的栏目隐藏,另一个栏目展开。

接下来了解一下html代码要如何写,如下图:在选项卡的菜单层和内容层的最外层给了divs2的ID,在JS中比较方便控制,而在菜单层中,ul下面的三个li只有第一个加了h1的样式名,这个h1的样式表示当前为选中状态。在选项卡的内容层中分别有三个li,其中第一个是显示的对应了菜单层的第一个li的选项,另外两个默认是隐藏的,也就是说在当前鼠标滑过第二个li时候,菜单层对应的第二个li会显示其他两个隐藏。在内容层中的ul添加了一个menus2的ID,这个ID在后面的JS中也会用到。

在讲解完html代码的写法之后,再来看一下JS代码,JS代码属于源生的,不用担心会有冲突,JS代码方面在原来的基础上进行了较大的改进,首先JS运行时会先判断一下,菜单层与内容层的li或者div数量是否一致,如果不一致,则会弹出提示框“菜单层数量和内容层数量不一样”。如果当前数量一致,则进行下一步,选中所有的ul菜单,鼠标选择某个菜单时,把原来选中菜单的样式hovclass移除,给当前选中的菜单加样式hovclass,并且把原来菜单的父级div隐藏,选中的菜单div显示,这个就是选项卡JS的原理。

最后一行判断选项div的父级id的命名是否一致,此处可根据实际情况修改。

以上信息由长沙企业网站建设--长沙蒲公英网络收集与整理,禁止用于任何商业行为
  • 网站主要关键词:
  • 长沙企业网站建设
  • 长沙网站定制
  • 长沙网站制作
  • 长沙网站设计
  • 长沙网站定制开发
  • 长沙做网站的公司
  • 长沙蒲公英网络

中国·湖南·长沙·开元东路华润置地广场二期B区16栋1819-1820   © 2019   长沙蒲公英网络技术有限公司   版权所有 湘ICP备2020021994号-1

TOP