CSS+JS选项卡制作教程、CSS滑动门效果制作教程

[ 录入者:91ctc | 时间:2012-07-17 22:30:53 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]

选项卡（也称CSS滑动门效果）可以节省页面占据篇幅，节省空间。所以，不论是在大型门户网站，还是中小网站，应用十分广泛。作为网页设计师，掌握选项卡的制作十分重要，本讲讲述一个CSS选项卡的制作过程。先粘贴代码。

CSS部分：

CSS Code复制内容到剪贴板

/*index.css文件*/
/*公共样式*/
body { font-size:12px;}
a { color:#000000; text-decoration:none}
a:hover { color:#FF0000; text-decoration:none}
/*选项卡样式*/
#Tab{width:277px;margin:0px;padding:0px;margin:0 auto;}
.Menubox { width:auto;height:32px;line-height:32px; background-color:#009900; overflow:hidden; border:0px;}
.Menubox ul{margin:0px 0px 0 0;padding:0px; display:block;}
.Menubox li{float:left;display:block;cursor:pointer;width:55px;text-align:center;/*color:#949694;*/; color:#FFFFFF;font-weight:bold; list-style:none; height:31px; font-size:14px;}
.Menubox li.hover{ margin:0px;padding:0px;background:#fff;width:55px;border-left:1px solid #95bd7f;border-top:1px solid #95bd7f;border-right:1px solid #95bd7f;color:#739242;font-weight:bold;height:31px;line-height:32px; }
.directory_title { width:276px; height:18px; font-size:13px; padding:8px 0px 4px 4px;}
.contentbox li { margin:0px;padding:0px; display:block; height:20px; width:200px;line-height:27px; height:20px; list-style:none}
.display_none { display:none;}

XHTML部分：

XML/HTML Code复制内容到剪贴板

<!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=gb2312" />
<title>CSS选项卡效果-CSS+JS滑动门效果</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script>
<!--
function setTab(name,cursel){//定义函数，setTab()，第一个参数为传递选项名的前缀；第二个为选项所处的序列号
for(i=1;i<=5;i++){//一个for循环，让i小于等于5，因为我们一共有五个选项卡。
var menu=document.getElementById(name+i);//获得选项名称所在的元素的id值，并赋值给menu变量
var con=document.getElementById("con_"+name+"_"+i);//获得选项卡主体内容所在的元素的id值，并赋值给con变量
menu.className=i==cursel?"hover":"";//如果i的值等于cursel的值，那么就使menu的引用的样式名称为hover，否则不引用hover样式
con.style.display=i==cursel?"block":"none";//如果i的值等于cursel的值，那么就使con的样式显示方式改为块状显示（block显示），否则不显示（none）
}
}
//-->
</script>
</head>
<body>
<div id="Tab">
<div class="Menubox">
<ul>
<li id="one1" class="hover" onmouseover="setTab('one',1)">选项一</li>
<li id="one2" onmouseover="setTab('one',2)">选项二</li>
<li id="one3" onmouseover="setTab('one',3)">选项三</li>
<li id="one4" onmouseover="setTab('one',4)">选项四</li>
<li id="one5" onmouseover="setTab('one',5)">选项五</li>
</ul>
</div>
<div class="contentbox">
<div id="con_one_1">
<div class="directory_title">第一个选项卡的内容</div>
<ul>
<li><a href="#">选项一新闻标题一</a></li>
<li>选项一新闻标题二</li>
<li>选项一新闻标题三</li>
</ul>
</div>
<div id="con_one_2" class="display_none">
<div class="directory_title">第二个选项卡的内容</div>
<ul>
<li><a href="#">选项二新闻标题一</a></li>
<li>选项二新闻标题二</li>
<li>选项二新闻标题三</li>
</ul>
</div>
<div id="con_one_3" class="display_none">
<div class="directory_title">第三个选项卡的内容</div>
<ul>
<li><a href="#">选项三新闻标题一</a></li>
<li>选项三新闻标题二</li>
<li>选项三新闻标题三</li>
</ul>
</div>
<div id="con_one_4" class="display_none">
<div class="directory_title">第四个选项卡的内容</div>
<ul>
<li><a href="#">选项四新闻标题一</a></li>
<li>选项四新闻标题二</li>
<li>选项四新闻标题三</li>
</ul>
</div>
<div id="con_one_5" class="display_none">
<div class="directory_title">第五个选项卡的内容</div>
<ul>
<li><a href="#">选项五新闻标题一</a></li>
<li>选项五新闻标题二</li>
<li>选项五新闻标题三</li>
</ul>
</div>
</div>
</div>
</body>
</html>

上面的代码，笔者在IE6、IE7、IE8、火狐、谷歌几款浏览器下均测试通过。读者不妨也复制下来测试一下。注意，CSS文件的存放位置，本例是放在css目录下。JS部分只有6行代码。我们将JS部分单独拎出来：

JavaScript Code复制内容到剪贴板

<script>
<!--
function setTab(name,cursel){//定义函数，setTab()，第一个参数为传递选项名的前缀；第二个为选项所处的序列号
for(i=1;i<=5;i++){//一个for循环，让i小于等于5，因为我们一共有五个选项卡。
var menu=document.getElementById(name+i);//获得选项名称所在的元素的id值，并赋值给menu变量
var con=document.getElementById("con_"+name+"_"+i);//获得选项卡主体内容所在的元素的id值，并赋值给con变量
menu.className=i==cursel?"hover":"";//如果i的值等于cursel的值，那么就使menu的引用的样式名称为hover，否则不引用hover样式
con.style.display=i==cursel?"block":"none";//如果i的值等于cursel的值，那么就使con的样式显示方式改为块状显示（block显示），否则不显示（none）
}
}
//-->
</script>

每一行都有注释，读者应该看得懂。看懂之后，就会举一反三了。其实，所谓的选项卡的本质是使用JS和CSS控制元素的显示方式为隐藏还是显示。

【关闭】【返回顶部】

上一篇：PHP教程第七十四讲——PHP输入输出缓…

下一篇：使用z-index和position:absolute实现…

{xiangguan_list}