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

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

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

时间：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 onClick="msgnone(’msg3’,’content4’)">关闭</div></div>
<div id="content5">第五个里面的内容<div onClick="msgnone(’msg2’,’content5’)">关闭</div></div>
<div id="content6">第六个里面的内容<div onClick="msgnone(’msg2’,’content6’)">关闭</div></div>
<div id="msg2">没有选择类型</div>
</div></body>

本文链接:

01载入中...
我爱设计网www.52design.com

（在线编辑：52design）	【】【打印】【关闭】【设计论坛】【设计师作品集】
免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。对本文有异议，请联络本站！转载要求：文章作者及来源信息必需保留。转载之图片、文件，链接请不要盗链到本站地址，且不准打上各自站点的水印。

经典设计欣赏

设计关键字：VI 新锐包装装帧海报地产广告画册名片标志软件界面 ICO 网页

Gatis ze	关于水晶城楼盘的	jaynes平面
让人流连往返的精	卫生间设计：七彩	卫生间设计：素雅

02载入中...

韩国站点	素材资源	艺术摄影	游戏娱乐	影视网站	建筑家居	FLASH站	旅游购物	明星网站
设计门户	优秀企业	时尚品牌	象素站点	数码通信	设计公司	汽车网站	国外优秀	儿童网站
个性展示	网站教学	工作室	学校教育	卡通漫画	文化艺术	体育运动	美容健身	食品饮料

当日文章推荐

查看更多相关内容

工业资讯\| 第五届伊莱克斯设计实验室大赛决赛前八 [10-25]	产业动态\| “2007重庆创意产业活动周”将11 [10-25]
互联网动态\| 中国互联网首家研究院落户深圳 [10-25]	互联网动态\| Web 2.0世界潜藏隐私危机 [10-25]
互联网动态\| 皓辰传媒CEO王超做客白银时代谈垂直 [10-25]	LOGO大赛\| 苏州轨道交通标志征集大赛 [10-24]
数码设备\| 佳能1DMark3脱焦问题真相大白 [10-24]	平面资讯\| 2007亚太最佳品牌标志年度奖征稿 [10-23]
数码影像\| “我眼中的老爸老妈”摄影比赛！ [10-23]	理论文献\| 让“抄”成为我们的习惯 [10-23]
设计资源\| 推荐欧美模板第二辑２０套模板！ [10-23]	UI资讯\| 水晶石联手搜狐推出“嫦娥一号”奔月网 [10-23]