CSS+JS打造的自适应宽度的滑动门和选项卡
文章来源：365jz.com 点击数：553 更新时间：2011-04-08 17:10 参与评论
<!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+JS打造的自适应宽度的滑动门和选项卡</title> <style type="text/css"> html{filter:expression(document.execCommand("BackgroundImageCache", false, true))} body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0} ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px} a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline} .Tab{height:100%;text-align:left} .Tab .title,.Tab .title div,.Tab .title .n1,.Tab .title .n1 span,.Tab .title .n2,.Tab .title .n2 span{background:url("/uploads/allimg/201104/20110409231259132.gif") no-repeat left top} .Tab .title{height:30px;padding-left:10px} .Tab .title div{background-position:right top;display:block;height:100%} .Tab .title .n1,.Tab .title .n2{background-position:left bottom;height:26px;line-height:26px; display:block;float:left;text-align:center;padding-left:12px;margin-top:4px;margin-left:1px;color:#333; text-decoration:none} .Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px} .Tab .title .n2{background-position:left -30px} .Tab .title .n2 span{background-position:right -30px} .tabcon ul{margin:5px auto;padding:0} .tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block} </style> <script type="text/javascript"> function $(obj){return document.getElementById(obj)} function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$('"+Xname+i+"').className='n2'");}eval("$('"+Xname+j+"').className='n1'");for(i=1;i<Lenght;i++){eval("$('"+Cname+i+"').style.display='none'");eval("$('"+Cname+j+"').style.display='block'");}} </script> </head> <body> <div style="width:500px;margin:0 auto"> <p>onmouseover事件</p> <div class="Tab"> <div class="title"> <a href="#" id="a1" class="n1" onmouseover="Tab('a','ax',6,1)"><span>ASP</span></a> <a href="#" id="a2" class="n2" onmouseover="Tab('a','ax',6,2)"><span>PHP</span></a> <a href="#" id="a3" class="n2" onmouseover="Tab('a','ax',6,3)"><span>DELPHI</span></a> <a href="#" id="a4" class="n2" onmouseover="Tab('a','ax',6,4)"><span>MOOTOOLS</span></a> <a href="#" id="a5" class="n2" onmouseover="Tab('a','ax',6,5)"><span>WECLCOME TO</span></a> <div></div> </div> <div class="tabcon"> <ul id="ax1"> <li><span class="box_r">04-02</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10513" title="IE浏览器的CSS识别技术（CSS Hacks）" target="_blank">IE浏览器的CSS识别技术（CSS Hacks）</a></li> <li><span class="box_r">04-02</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10511" title="CSS3实现的很炫的按钮" target="_blank">CSS3实现的很炫的按钮</a></li> <li><span class="box_r">04-02</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10510" title="兼容IE6和Firefox,DIV实现input垂直居中" target="_blank">兼容IE6和Firefox,DIV实现input垂直居中</a></li> <li><span class="box_r">03-17</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10260" title="神奇的css属性pointer-events" target="_blank">神奇的css属性pointer-events</a></li> <li><span class="box_r">03-14</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10206" title="CSS3属性之二：阴影：box-shadow" target="_blank">CSS3属性之二：阴影：box-shadow</a></li> <li><span class="box_r">03-14</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10205" title="内容排版：CSS实现强制不换行、自动换行、强制换行" target="_blank">内容排版：CSS实现强制不换行、自动换行...</a></li> <li><span class="box_r">03-09</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10132" title="去除a链的虚线框 兼容IE FF" target="_blank">去除a链的虚线框 兼容IE FF</a></li> </ul> <ul id="ax2" style="display:none"> <li><span class="box_r">04-06</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10603" title="基于jquery的表格排序效果" target="_blank">基于jquery的表格排序效果</a></li> <li><span class="box_r">04-03</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10524" title="两种方法实现列表最新几条高亮效果" target="_blank">两种方法实现列表最新几条高亮效果</a></li> <li><span class="box_r">04-02</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10509" title="简单的鼠标移到图片上提示效果" target="_blank">简单的鼠标移到图片上提示效果</a></li> <li><span class="box_r">03-31</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10456" title="不带图片的圆角CSS box及带箭头框" target="_blank">不带图片的圆角CSS box及带箭头框</a></li> <li><span class="box_r">03-29</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10437" title="JQuery常用方法一览，大家收藏吧" target="_blank">JQuery常用方法一览，大家收藏吧</a></li> <li><span class="box_r">03-28</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10413" title="超链接中的 javascript:void(0);" target="_blank">超链接中的 javascript:void(0);</a></li> <li><span class="box_r">03-26</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10407" title="两个基于jQuery的渐隐渐显图片轮换幻灯片" target="_blank">两个基于jQuery的渐隐渐显图片轮换幻灯片</a></li> </ul> <ul id="ax3" style="display:none"> <li><span class="box_r">04-19</span><a href="/html/?action-viewthread-tid-243" title="在IE中调用 Dreamweaver 编辑网页" target="_blank">在IE中调用 Dreamweaver 编辑网页</a></li> <li><span class="box_r">06-11</span><a href="/html/?action-viewthread-tid-4320" title="Dreamweaver教程：轻松制作网页反馈表单" target="_blank">Dreamweaver教程：轻松制作网页反馈表单</a></li> <li><span class="box_r">10-15</span><a href="/html/?action-viewthread-tid-190" title="Dreamweaver CS3新功能描述" target="_blank">Dreamweaver CS3新功能描述</a></li> <li><span class="box_r">01-10</span><a href="/html/?action-viewthread-tid-192" title="用Spry轻松将XML数据显示到HTML页" target="_blank">用Spry轻松将XML数据显示到HTML页</a></li> <li><span class="box_r">01-11</span><a href="/html/?action-viewthread-tid-1884" title="了解Dreamweaver CS3的CSS布局规则" target="_blank">了解Dreamweaver CS3的CSS布局规则</a></li> <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码" target="_blank">dreamweaver网页制作中常用代码</a></li> <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法" target="_blank">符合web标准的网页中调用Flash的方法</a></li> </ul> <ul id="ax4" style="display:none"> <li><span class="box_r">07-14</span><a href="/html/?action-viewthread-tid-191" title="Dreamweaver CS3集成Spry效果试用" target="_blank">Dreamweaver CS3集成Spry效果试用</a></li> <li><span class="box_r">04-19</span><a href="/html/?action-viewthread-tid-1639" title="将PSD效果图制作成HTML+CSS文件" target="_blank">将PSD效果图制作成HTML+CSS文件</a></li> <li><span class="box_r">04-19</span><a href="/html/?action-viewthread-tid-243" title="在IE中调用 Dreamweaver 编辑网页" target="_blank">在IE中调用 Dreamweaver 编辑网页</a></li> <li><span class="box_r">06-11</span><a href="/html/?action-viewthread-tid-4320" title="Dreamweaver教程：轻松制作网页反馈表单" target="_blank">Dreamweaver教程：轻松制作网页反馈表单</a></li> <li><span class="box_r">10-15</span><a href="/html/?action-viewthread-tid-190" title="Dreamweaver CS3新功能描述" target="_blank">Dreamweaver CS3新功能描述</a></li> <li><span class="box_r">01-10</span><a href="/html/?action-viewthread-tid-192" title="用Spry轻松将XML数据显示到HTML页" target="_blank">用Spry轻松将XML数据显示到HTML页</a></li> <li><span class="box_r">01-11</span><a href="/html/?action-viewthread-tid-1884" title="了解Dreamweaver CS3的CSS布局规则" target="_blank">了解Dreamweaver CS3的CSS布局规则</a></li> <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码" target="_blank">dreamweaver网页制作中常用代码</a></li> <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法" target="_blank">符合web标准的网页中调用Flash的方法</a></li> </ul> <ul id="ax5" style="display:none"> <li><span class="box_r">07-14</span><a href="/html/?action-viewthread-tid-191" title="Dreamweaver CS3集成Spry效果试用" target="_blank">Dreamweaver CS3集成Spry效果试用</a></li> <li><span class="box_r">04-19</span><a href="/html/?action-viewthread-tid-1639" title="将PSD效果图制作成HTML+CSS文件" target="_blank">将PSD效果图制作成HTML+CSS文件</a></li> <li><span class="box_r">01-11</span><a href="/html/?action-viewthread-tid-1884" title="了解Dreamweaver CS3的CSS布局规则" target="_blank">了解Dreamweaver CS3的CSS布局规则</a></li> <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码" target="_blank">dreamweaver网页制作中常用代码</a></li> <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法" target="_blank">符合web标准的网页中调用Flash的方法</a></li> </ul> </div> </div> <p>onclick事件</p> <div class="Tab"> <div class="title"> <a href="#" id="b1" class="n1" onclick="Tab('b','bx',6,1)"><span>JAVA</span></a> <a href="#" id="b2" class="n2" onclick="Tab('b','bx',6,2)"><span>VB</span></a> <a href="#" id="b3" class="n2" onclick="Tab('b','bx',6,3)"><span>VC++</span></a> <a href="#" id="b4" class="n2" onclick="Tab('b','bx',6,4)"><span>JQUERY</span></a> <a href="#" id="b5" class="n2" onclick="Tab('b','bx',6,5)"><span>NEXT WHICH ONE……</span></a> <div></div> </div> <div class="tabcon"> <ul id="bx1"> <li><span class="box_r">04-05</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10592" title="北京铁道工程机电技术研究所网站欣赏" target="_blank">北京铁道工程机电技术研究所网站欣赏</a></li> <li><span class="box_r">04-03</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10516" title="武汉市常青一中页面设计欣赏" target="_blank">武汉市常青一中页面设计欣赏</a></li> <li><span class="box_r">04-02</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10387" title="32套免费的网页、移动设备UI元素和模板" target="_blank">32套免费的网页、移动设备UI元素和模板</a></li> <li><span class="box_r">03-17</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10252" title="分享35个最新的单页网站设计案例欣赏" target="_blank">分享35个最新的单页网站设计案例欣赏</a></li> <li><span class="box_r">03-14</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10067" title="10个漂亮的JQuery网站欣赏" target="_blank">10个漂亮的JQuery网站欣赏</a></li> <li><span class="box_r">03-07</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10040" title="湖南理工学院后勤处网站欣赏" target="_blank">湖南理工学院后勤处网站欣赏</a></li> <li><span class="box_r">03-28</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10020" title="金和OA管理软件设计欣赏" target="_blank">金和OA管理软件设计欣赏</a></li> </ul> <ul id="bx2" style="display:none"> <li><span class="box_r">10-19</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=7090" title="Fireworks制作经典的扫光字GIF动画" target="_blank">Fireworks制作经典的扫光字GIF动画</a></li> <li><span class="box_r">10-18</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=7055" title="Fireworks实例教程：制作转动的四叶草效果" target="_blank">Fireworks实例教程：制作转动的四叶草效果</a></li> <li><span class="box_r">10-12</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=2516" title="Fireworks教程:不同的切角效果" target="_blank">Fireworks教程:不同的切角效果</a></li> <li><span class="box_r">03-24</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=2271" title="Fireworks教程：制作红墙砖头效果" target="_blank">Fireworks教程：制作红墙砖头效果</a></li> <li><span class="box_r">03-24</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=2211" title="Fireworks教程：制作层层激发彩光魅力" target="_blank">Fireworks教程：制作层层激发彩光魅力</a></li> <li><span class="box_r">04-25</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=1622" title="Fireworks教程：绘制立体文字图标" target="_blank">Fireworks教程：绘制立体文字图标</a></li> </ul> <ul id="bx3" style="display:none"> <li><span class="box_r">04-05</span><a href="/html/?action-viewthread-tid-10591" title="巴西设计师Marcel Bittencourt作品欣赏" target="_blank">巴西设计师Marcel Bittencourt作品欣赏</a></li> <li><span class="box_r">01-28</span><a href="/html/?action-viewthread-tid-9851" title="转载作品：三松食品包装设计" target="_blank">转载作品：三松食品包装设计</a></li> <li><span class="box_r">01-16</span><a href="/html/?action-viewthread-tid-9450" title="39张为您带来灵感的海报设计作品" target="_blank">39张为您带来灵感的海报设计作品</a></li> <li><span class="box_r">01-07</span><a href="/html/?action-viewthread-tid-9128" title="2010年精选漂亮的名片设计欣赏" target="_blank">2010年精选漂亮的名片设计欣赏</a></li> <li><span class="box_r">01-06</span><a href="/html/?action-viewthread-tid-9084" title="性感人物类PS特效精彩设计作品7件" target="_blank">性感人物类PS特效精彩设计作品7件</a></li> </ul> <ul id="bx4" style="display:none"> <li><span class="box_r">10-18</span><a href="/html/?action-viewthread-tid-7038" title="创意的运动品牌海报作品设计欣赏" target="_blank">创意的运动品牌海报作品设计欣赏</a></li> <li><span class="box_r">10-01</span><a href="/html/?action-viewthread-tid-6721" title="标志设计元素运用实例：咖啡" target="_blank">标志设计元素运用实例：咖啡</a></li> <li><span class="box_r">09-08</span><a href="/html/?action-viewthread-tid-6209" title="一组很SEX且幽默的女性主题插画！" target="_blank">一组很SEX且幽默的女性主题插画！</a></li> <li><span class="box_r">09-08</span><a href="/html/?action-viewthread-tid-6208" title="五粮液／酿神酒系列包装" target="_blank">五粮液／酿神酒系列包装</a></li> <li><span class="box_r">09-04</span><a href="/html/?action-viewthread-tid-6102" title="法国艾乐优（国际）集团系列产品包装设计" target="_blank">法国艾乐优（国际）集团系列产品包装设计</a></li> </ul> <ul id="bx5" style="display:none"> <li><span class="box_r">10-31</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=7397" title="78个创意广告欣赏（二）" target="_blank">78个创意广告欣赏（二）</a></li> <li><span class="box_r">10-31</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=7395" title="78个创意广告欣赏" target="_blank">78个创意广告欣赏</a></li> <li><span class="box_r">09-08</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=6186" title="超酷创意的白木材质杂志和CD架" target="_blank">超酷创意的白木材质杂志和CD架</a></li> <li><span class="box_r">08-18</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=5528" title="创意无极限（平面字体创意广告欣赏）" target="_blank">创意无极限（平面字体创意广告欣赏）</a></li> <li><span class="box_r">08-13</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=5433" title="Amber Hooks 书籍设计" target="_blank">Amber Hooks 书籍设计</a></li> <li><span class="box_r">08-04</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=5247" title="2010年最有杀伤力的一套精彩文案" target="_blank">2010年最有杀伤力的一套精彩文案</a></li> </ul> </div> </div> </div> </body> </html>
代码中所用到的图片：
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容
