一个比较有用的特殊选项卡特效代码- 导航代码 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页特效 > 导航代码 > 一个比较有用的特殊选项卡特效代码

导航代码: 仿网易的滑动门导航效果代码(DIV+CSS); 网站导航文字按特殊的类型进行切换的特效; 一个比较有用的特殊选项卡特效代码; 效果不错的分页列表的网页特效代码; 网页特效代码：非常简洁的网页导航菜单; 网页特效：个性化的网页按钮; 网页设计中不错的二级导航菜单特效; 不错的翻页特效(CSS实现); 类似选项卡的切换效果; js:商品分类后有一个方框指向到搜索栏; 左侧菜单点击变色效果; XHTML+CSS制作的网站导航菜单; 特效代码:区别网页链接访问与未访问; 百度有啊商城CSS+XHTML实现的圆角; 树形导航特效,CSS特效代码; CSS制作带阴影的网站导航代码; 网页制作的网页下拉菜单（1）; 网页制作的网页下拉菜单（2）; 网页制作的网页下拉菜单（3）; 网页制作的网页下拉菜单（4）

No. « 1 2 › »

技术文章搜索

关键字

导航代码中的一个比较有用的特殊选项卡特效代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 157 ::

收藏到网摘: n/a

网站导航文字按特殊的类型进行切换的特效效果不错的分页列表的网页特效代码

一个比较有用的特殊选项卡特效

<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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

网站导航文字按特殊的类型进行切换的特效效果不错的分页列表的网页特效代码

评论 (0) All