网页制作中分类的选项卡特效代码-教程-创意在线

当前位置：首页 > 教程 > 脚本特效 > 正文

网页制作中分类的选项卡特效代码

作者:　来源:网页陶吧　发表时间:2007-10-25 13:30:20　浏览：

选项卡原身是Windows操作系统的一个创意，即通过交换选项，让很多项目信息轮替显示在大小和位置都固定的小块区域里。因此选项卡具有占用篇幅小，辐射内容大的特点。一个典型的例子是你打开IE浏览器，依次点击“工具”-“Internet选项”，这个表单就是一个选项卡典型布局。当然了，这里所说的选项卡效果是要在Web页面实现的，并非应用程序里的菜单选项，在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍一种简洁的选项卡效果的实现，兼容性较好，方便大家直接使用。

以下是引用片段：
<style type="text/css">
body {
margin:0px;
text-align:center;
font-size:12px;
}
#divall {
margin:auto;
margin-top:35px;
width:300px;
height:200px;
background-color:#7DA7D9;
border:0px;
}
#title {
width:300px;
height:20px;
font-size:14px;
margin-top:4px;
}
#table1 table {
width:300px;
height:30px;
font-size:12px;
}
#table2 table {
width:300px;
height:30px;
font-size:12px;
}
#content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 {
margin:auto;
height:110px;
width:290px;
background-color:#eee;
position:relative;
}
#content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div {
position:absolute;
bottom:3px;
right:3px;
cursor:pointer;
}
a {
text-decoration:none;
}
.changebordercolor {
border-top:1px solid #369;
border-left:1px solid #369;
}
.backbordercolor {
border:0px solid red;
}
</style>
<script language="javascript">
function msg(){
document.getElementById("msg1").style.display="none"
document.getElementById("msg2").style.display="none"
}
function msgnone(ms,cont){
document.getElementById(ms).style.display=’block’
document.getElementById(cont).style.display=’none’
}
function aa1(){
document.getElementById("content1").style.display="block"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa2(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="block"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa3(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="block"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa4(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="block"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="none"
}
function aa5(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="block"
document.getElementById("content6").style.display="none"
}
function aa6(){
document.getElementById("content1").style.display="none"
document.getElementById("content2").style.display="none"
document.getElementById("content3").style.display="none"
document.getElementById("content4").style.display="none"
document.getElementById("content5").style.display="none"
document.getElementById("content6").style.display="block"
}
</script>
<body onLoad="aa1();msg()">
<div id="divall">
<div id="title">分类类型</div>
<div id="table1">
<table cellpadding=0 cellspacing=0 boder=0>
<tr align=center>
<td onMouseOver="this.bgColor=’#33ccff’;aa1();msg();this.className=’changebordercolor’"
onMouseOut="this.bgColor=’#7DA7D9’;this.className=’backbordercolor’"><a
href="http://www.baidu.com">游戏下载</a></td>
<td onMouseOver="this.bgColor=’#33ccff’;aa2();msg();this.className=’changebordercolor’"
onMouseOut="this.bgColor=’#7DA7D9’;this.className=’backbordercolor’"><a
href="http://www.baidu.com">游戏下载</a></td>
<td onMouseOver="this.bgColor=’#33ccff’;aa3();msg();this.className=’changebordercolor’"
onMouseOut="this.bgColor=’#7DA7D9’;this.className=’backbordercolor’"><a
href="http://www.baidu.com">游戏下载</a></td>
</tr></table></div>
<div id="content1">第一个里面的内容<div onClick="msgnone(’msg1’,’content1’)">关闭</div></div>
<div id="content2">第二个里面的内容<div onClick="msgnone(’msg1’,’content2’)">关闭</div></div>
<div id="content3">第三个里面的内容<div onClick="msgnone(’msg1’,’content3’)">关闭</div></div>
<div id="msg1">没有选择类型</div>
<div id="table2">
<table cellpadding=0 cellspacing=0 boder=0>
<tr align=center>
<td onMouseOver="this.bgColor=’#33ccff’;aa4();msg();this.className=’changebordercolor’"
onMouseOut="this.bgColor=’#7DA7D9’;this.className=’backbordercolor’"><a
href="http://www.baidu.com">游戏下载</a></td>
<td onMouseOver="this.bgColor=’#33ccff’;aa5();msg();this.className=’changebordercolor’"
onMouseOut="this.bgColor=’#7DA7D9’;this.className=’backbordercolor’"><a
href="http://www.baidu.com">游戏下载</a></td>
<td onMouseOver="this.bgColor=’#33ccff’;aa6();msg();this.className=’changebordercolor’"
onMouseOut="this.bgColor=’#7DA7D9’;this.className=’backbordercolor’"><a
href="http://www.baidu.com">游戏下载</a></td>
</tr></table></div>
<div id="content4">第四个里面的内容<div

在线编辑：52design

本文链接：

免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息。对本文有异议，请联络本站！
转载要求：文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址，且不准打上各自站点的水印！

近期推荐报道

返回首页更多精彩等着你！

Photoshop\| Photoshop快速调出情侣图片柔美的	插画艺术\| 绝望的小熊—美国插画师Luke
网页设计\| 波兰Tiquet网站设计作品欣赏	插画艺术\| Nanami Cowdroy灵动黑白插画
Photoshop\| Photoshop调出美女图片绚丽的橙红	HTML/CSS\| 实现DIV透明而里面的文字不透明
平面设计\| 世界杯之平面广告欣赏	插画艺术\| Alberto Cerrite&ntil
平面设计\| Havaianas人字拖最新平面广告系列	网页设计\| 英国madefavourite简洁细腻型

·青春唯美插画培训网络远程班正在招生
·原创作品集:让创意在多飞一会!
·PNG素材专题/素材资源库推荐专题
·每日更新设计人才招聘信息（企业免费发布）！

对联大全歇后语大全谚语大全广告语大全

创意焦点	大赛征集 \| 产业资讯
·新华教育集团2010第二届网上就业招聘会隆重开幕 ·安徽新华电脑学校疯狂英语训练营火爆开营 ·谷歌将用7亿美元收购旅游软件公司ITA ·广东举行首届高校工业设计大赛 ·第十八届上海国际印刷包装纸业展览会 ·为你的网站创建一个明晰的“关于”页面