学做网站培训课程介绍

当前位置:

JS制作鼠标经过(点击)时TAB切换菜单(简单好用)

鼠标经过时TAB菜单切换javascript特效介绍

一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个栏目组合在一起,然后通过鼠标移动来切换显示不同栏目的内容。这样即能最大程序的展示网站的栏目内容,也不会让网站版面增大。如下图:

制作鼠标经过时TAB菜单切换javascript特效

如果我们要去做一个门户网站,并且网站的栏目无法全部展现到首页,我们也可以学习大型门户网站的做法,给我们自己的网站制作出鼠标经过时TAB菜单切换javascript特效。(相关知识:门户网站制作方法

鼠标经过时TAB菜单切换特效原理介绍

光标移动切换栏目的特效本质就是修改DIV的display属性,默认情况下只显示一个DIV,其它DIV的display属性为none,当光标移动到某个栏目时,会传递一个参数给T函数,通过三元判断来使指向的那个DIV的display CSS属性为block,其它的DIV属性为none。(了解更多HTML方面知识,请学习html5从入门教程)

鼠标经过时TAB菜单切换javascript特效制作步骤

1、将某个版块要显示网站内容的DIV的类名,分别取名 id="ul1" , id="ul2" , id="ul3" ;

2、把TAB切换的导航栏目的每个列表栏目添加javascript触发代码:分别为onmouseover="t(1)" ,onmouseover="t(2)",onmouseover="t(3)"。

这其实是触发一个函数t,并且当光标移到某个栏目时会触发这个函数,来改变我们自己网站的栏目内容。当我们触发这个函数时,会传给这个函数一个参数,即1、2、3;

3、为了达到鼠标移动tab切换栏目的功能,我们需要写一段js特效代码,就是来接收光标移动时传送的参数。也就是函数t。代码如下:


<script>
function t(pid){
for(var i=1;i<=3;i++){
document.getElementById('ul'+i).style.display= pid==i ? 'block' : 'none'; //这里使用三元运算符来判断
}
}
</script>

4、以上这段javascript代码要放在我们自己做网站的</head>标签上面,就可以达到光标移动切换网站栏目的效果。

代码集(如果需要点击后切换,就换成:onclick)


<script>
function t(pid){for(var i=1;i<=3;i++){
document.getElementById('ul'+i).style.display= pid==i ? 'block' : 'none'; //使用三元运算符
}
}</script>

<div class="tab1 clearfix">
<ul>
<li onmouseover="t(1)">新闻</li>
<li onmouseover="t(2)">体育</li>
<li onmouseover="t(3)" >历史</li>
</ul>
</div>
<div class="tab2">
<ul id="ul1">
<li>栏目内容1</li><li>栏目内容1</li><li>栏目内容1</li><li>栏目内容1</li><li>栏目内容1</li>
</ul>
<ul id="ul2">
<li>栏目内容2</li><li>栏目内容2</li><li>栏目内容2</li><li>栏目内容2</li>
</ul>
<ul id="ul3">
<li>栏目内容3</li><li>栏目内容3</li><li>栏目内容3</li><li>栏目内容3</li>
</ul>
</div>

通过以上的方法和代码,就可以在自己建网站时制作出鼠标经过时TAB菜单切换特效了,更多TAB特效代码,可以参考tab切换实例代码

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • DW鼠标经过更换图片变化 视频教程 (1154138 次浏览)
    dreamweaver鼠标经过更换图片特效就是当鼠标经过图像就是当鼠标经过图像时,原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的:原始
  • 鼠标经过时TAB菜单切换javascript特效介绍一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • Dreamweaver跳转菜单制作 视频教程 (1123733 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,
  • 在学做网站论坛的html视频教程中,讲到了空链接可以使用href="#"。在实际网站开发过程中,href="javascript:void(0)"也可以制作空链接。那么h
  • javascript 定时器代码 (15407 次浏览)
    我们在做网站时,有时需要设置某个时间后,显示一些提示内容。这就需要给自己的网站添加一个定时器。以下是学做网站论坛提供的javascript 定时器
  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca