JS制作鼠标经过(点击)时TAB切换菜单(简单好用)
鼠标经过时TAB菜单切换javascript特效介绍
一些大型门户网站(新浪,腾讯,163等)中有很多的栏目,每个网站栏目下有很多的文章,在网站首页会将几个栏目组合在一起,然后通过鼠标移动来切换显示不同栏目的内容。这样即能最大程序的展示网站的栏目内容,也不会让网站版面增大。如下图:
如果我们要去做一个门户网站,并且网站的栏目无法全部展现到首页,我们也可以学习大型门户网站的做法,给我们自己的网站制作出鼠标经过时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切换实例代码