JQuery/PHP
制作鼠标经过时TAB菜单切换javascript特效
PetitQ
收藏
一些大型门户网站（新浪，腾讯，163 等）中有很多的栏目，每个网站栏目下有很多的文章，在网站首页会将几个栏目组合在一起，然后通过鼠标移动来切换显示不同栏目的内容。这样即能最大程序的展示网站的栏目内容，也不会让网站版面增大。如下图：
如果我们要去做一个门户网站，并且网站的栏目无法全部展现到首页，我们也可以学习大型门户网站的做法，给我们自己的网站制作出鼠标经过时 TAB 菜单切换 javascript 特效。
光标移动切换栏目的特效本质就是修改 DIV 的 display 属性，默认情况下只显示一个 DIV，其它 DIV 的 display 属性为 none，当光标移动到某个栏目时，会传递一个参数给 T 函数，通过三元判断来使指向的那个 DIV 的 display CSS 属性为 block,其它的 DIV 属性为 none。
也想出现在这里？联系我们吧
制作步骤
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 代码要放在我们自己做网站的标签上面，就可以达到光标移动切换网站栏目的效果。
完整代码
<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li,ol{list-style:none;}.clearfix:after{content:".";visibility:hidden;display:block;height:0;line-height:0;font-size:0;clear:both;}.clearfix{*zoom:1}.tab1{width:300px;background:#999;}.tab1 li{float:left;width:80px;height:30px;line-height:30px;list-style:none; }.tab2{border:1px solid #eee;width:300px;}.tab2 li{height:30px;margin-bottom:10px;line-height:30px;}#ul2,#ul3{display:none}#ul1{display:block}</style>
<script>
function t(pid){for(var i=1;i<=3;i++){
document.getElementById('ul'+i).style.display= pid==i ? 'block' : 'none'; //使用三元运算符
}}</script>
</head>
<body>
<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></body></html>
通过以上的方法和代码，就可以在自己建网站时制作出鼠标经过时 TAB 菜单切换特效了，更多 TAB 特效代码，可以参考 tab 切换实例代码
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
