源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS实现标签页效果(配合css)

  • 时间:2021-05-05 04:58 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS实现标签页效果(配合css)
[b]实现的效果[/b]: [img]http://files.jb51.net/file_images/article/201304/201343151725318.png?201333151758[/img] 如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在“标签1”上,则内容区域显示的内容为“我是内容1”,并且“标签1”的颜色要比“标签2”和“标签3”深一些,同样鼠标移到“标签2”和“标签3”的时候显示“我是内容2”和“我是内容3”。这样的效果是CSS和JS配合实现的。下面我们就来看看具体代码: [b]首先来看HTML代码[/b]:
[url=../CSS/tab.css]<script language="JavaScript" type="text/javascript" src="../JS文件/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="../JS文件/tab.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">标签1</li> <li>标签2</li> <li>标签3</li> </ul>  <div id="contentnow" class="contentfirst contentin">我是内容1</div> <div id="contentnow" class="contentfirst">我是内容2</div> <div id="contentnow" class="contentfirst">我是内容3</div> </body> </html>
JS代码实现思路很简单,首先给每个标签项注册一个mouseover函数,当鼠标移到任何一个标签上的时候都会执行moveover函数体内的代码。函数体代码首先获取当前节点,将原来显示的内容进行隐藏,然后根据传入的节点index把对应于相应标签下的内容显示出来。在代码中我们可以看到除了对HTML中节点样式进行改动外还使用了setTimeout函数,该函数的作用是延迟函数的执行时间,下面代码中的延迟时间为300毫秒,也就是当鼠标移到标签后并不是立即执行而是延迟300毫秒后在执行,如果在300毫秒时间内鼠标移出标签区域则不再执行该代码。 除了该效果外,我们还可以利用相同的原理给每个标签注册click函数,当点击每个标签的时候在原内容区域可以装载不同的页面或任意页面的一部分,有兴趣的话可以点击这里下载源码。该源码中包含了文中所提到的两种不同函数所实现的不同功能。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部