网管联盟 | 网管论坛 | 网管u家 | 网管博客 | 网管软件 | 网管求职 | 小游戏 | 网管搜索 | 网管原创 | 网管聚合 | 网管读摘 | 网管焦点 | 世界素材 | 会员投稿 | 会员中心 
中国网管联盟
Windows Linux Cisco 网络技术 数据库 黑客攻防 DotNet Java PHP 认证 新闻资讯 服务器 存储资讯 网络设备 网管学堂 技术专题 焦点 网吧频道
 当前位置： > bitsCN.com > 网管学堂 > 网页设计 > Flash > 基础教程 > 网页制作中分类的选项卡特效代码  

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

2008-02-28  作者:bitsCN整理  来源:中国网管联盟  点评 投稿 收藏

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

网管联盟bitsCN@com

以下是引用片段：
<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; 

网管网www.bitscn.com


                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"

网管u家u.bitsCN.com


 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"
中国网管联盟bitsCN.com

 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"
网管网www.bitscn.com

 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.68design.net/Web-Guide/HTMLCSS/http://www.68design.net" >游戏下载</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa2();msg();this.className='changebordercolor'" 
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a 
href="http://www.68design.net/Web-Guide/HTMLCSS/http://www.68design.net" >游戏下载</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'"  网管论坛bbs_bitsCN_com
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a 
href="http://www.68design.net/Web-Guide/HTMLCSS/http://www.68design.net" >游戏下载</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.68design.net/Web-Guide/HTMLCSS/http://www.68design.net" >游戏下载</a></td>
网管u家u.bitscn@com

<td onMouseOver="this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'" 
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a 
href="http://www.68design.net/Web-Guide/HTMLCSS/http://www.68design.net" >游戏下载</a></td>
<td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className='changebordercolor'" 
onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a 
href="http://www.68design.net/Web-Guide/HTMLCSS/http://www.68design.net" >游戏下载</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>

网管下载dl.bitscn.com


<div id="msg2">没有选择类型</div>
</div></body> 中国网管论坛bbs.bitsCN.com

  中国网管论坛bbs.bitsCN.com


TAGs：   代码   特效   选项   分类   网页制作       <   document.getElementById      
 上一篇：清除浮动的最优方法   下一篇：网页中九种常见用途特效按钮的代码
相关文章列表
网页制作中分类的选项卡特效代码 评论：
loading.. 评论加载中…
评论:请自觉遵守互联网相关政策法规，评论不得超过250字。

验证码： 注册用户
本类热门排行：
1.Photoshop打造质感的玉石字体
2.无权查看网页的原因和解决方法
3.网站的视觉路径和版式设计的分析
4.如何提高Web页面的性能
5.网页设计中CSS关联调用的4种方式
6.Photoshop中使用11px清晰中文字体
7.完美者Photoshop CS4 Extended初探
8.新人深入学习CSS布局网页制作
9.CSS教程：弄懂闭合浮动元素
10.CSS样式指南：提高CSS代码的可读性
最新推荐文章：
1.Flash MX 2004 video
2.Flash ActionScript 2.0 
3.flash 打开我的文档等特殊文件夹
4.学习笔记：飘动的汽泡
5.基于图像的虚拟现实－三维全景
6.Flash 与 html 的一些实
7.浅析三维全景
8.flash remoting 实践
9.Flash角色透视行走动作分解
10.Flash 与三维全景结合
网管论坛交流：
·不疯魔不成活
·令你大开眼界的真正标准化机房，已整理重
·华为HCSE OSPF路由协议培训教材 V3.0
·为赈灾，女孩舍身拍“裸照”
·Windows Server 2003服务器群集创建和配
·exchange2k3全套官方资料
·双儿一周岁了。。。特殊的礼物来啦。。
·存储备份技术版块守则
·无盘技术交流区守则
·DOS命令基础大全之命令详解<作者吐血