您现在的位置： 365建站网 > 365文章 > CSS+JS打造的自适应宽度的滑动门和选项卡

CSS+JS打造的自适应宽度的滑动门和选项卡

文章来源：365jz.com     点击数：600    更新时间：2011-04-08 17:10   参与评论

</>code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>CSS+JS打造的自适应宽度的滑动门和选项卡</title>
  6. <style type="text/css">
  7. html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}
  8. body{text-align:center;font:12px Verdana,sans-serif;margin:5px 0}
  9. ul,ol,li{margin:0;padding:0;border:0;list-style-type:none} input,select{font-size:12px}
  10. a{color:#010101;text-decoration:none;outline:none} a:hover{text-decoration:underline}
  11. .Tab{height:100%;text-align:left}
  12. .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}
  13. .Tab .title{height:30px;padding-left:10px}
  14. .Tab .title div{background-position:right top;display:block;height:100%}
  15. .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}
  16. .Tab .title .n1 span,.Tab .title .n2 span{background-position:right bottom;display:block;padding-right:12px}
  17. .Tab .title .n2{background-position:left -30px}
  18. .Tab .title .n2 span{background-position:right -30px}
  19. .tabcon ul{margin:5px auto;padding:0}
  20. .tabcon ul li{height:24px;line-height:24px;padding-left:16px;overflow:hidden;display:block}
  21. </style>
  22. <script type="text/javascript">
  23. function $(obj){return document.getElementById(obj)}
  24. 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'");}}
  25. </script>
  26. </head>
  27. <body>
  28. <div style="width:500px;margin:0 auto">
  29. <p>onmouseover事件</p>
  30. <div class="Tab">
  31.  <div class="title">
  32.  <a href="#" id="a1" class="n1" onmouseover="Tab('a','ax',6,1)"><span>ASP</span></a>
  33.  <a href="#" id="a2" class="n2" onmouseover="Tab('a','ax',6,2)"><span>PHP</span></a>
  34.  <a href="#" id="a3" class="n2" onmouseover="Tab('a','ax',6,3)"><span>DELPHI</span></a>
  35.  <a href="#" id="a4" class="n2" onmouseover="Tab('a','ax',6,4)"><span>MOOTOOLS</span></a>
  36.  <a href="#" id="a5" class="n2" onmouseover="Tab('a','ax',6,5)"><span>WECLCOME TO</span></a>
  37.  <div></div> 
  38.  </div>
  39.  <div class="tabcon">
  40.  <ul id="ax1">
  41. <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> 
  42. <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> 
  43. <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> 
  44. <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> 
  45. <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> 
  46. <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> 
  47. <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> 
  48.  </ul>
  49.  <ul id="ax2" style="display:none">
  50. <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> 
  51. <li><span class="box_r">04-03</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10524" title="两种方法实现列表最新几条高亮效果" target="_blank">两种方法实现列表最新几条高亮效果</a></li> 
  52. <li><span class="box_r">04-02</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10509" title="简单的鼠标移到图片上提示效果" target="_blank">简单的鼠标移到图片上提示效果</a></li> 
  53. <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> 
  54. <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> 
  55. <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> 
  56. <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> 
  57.  </ul>
  58. <ul id="ax3" style="display:none">
  59. <li><span class="box_r">04-19</span><a href="/html/?action-viewthread-tid-243" title="在IE中调用 Dreamweaver 编辑网页" target="_blank">在IE中调用 Dreamweaver 编辑网页</a></li> 
  60. <li><span class="box_r">06-11</span><a href="/html/?action-viewthread-tid-4320" title="Dreamweaver教程：轻松制作网页反馈表单" target="_blank">Dreamweaver教程：轻松制作网页反馈表单</a></li> 
  61. <li><span class="box_r">10-15</span><a href="/html/?action-viewthread-tid-190" title="Dreamweaver CS3新功能描述" target="_blank">Dreamweaver CS3新功能描述</a></li> 
  62. <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> 
  63. <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> 
  64. <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码" target="_blank">dreamweaver网页制作中常用代码</a></li> 
  65. <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法" target="_blank">符合web标准的网页中调用Flash的方法</a></li> 
  66.  </ul>
  67.  <ul id="ax4" style="display:none">
  68. <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> 
  69. <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> 
  70. <li><span class="box_r">04-19</span><a href="/html/?action-viewthread-tid-243" title="在IE中调用 Dreamweaver 编辑网页" target="_blank">在IE中调用 Dreamweaver 编辑网页</a></li> 
  71. <li><span class="box_r">06-11</span><a href="/html/?action-viewthread-tid-4320" title="Dreamweaver教程：轻松制作网页反馈表单" target="_blank">Dreamweaver教程：轻松制作网页反馈表单</a></li> 
  72. <li><span class="box_r">10-15</span><a href="/html/?action-viewthread-tid-190" title="Dreamweaver CS3新功能描述" target="_blank">Dreamweaver CS3新功能描述</a></li> 
  73. <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> 
  74. <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> 
  75. <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码" target="_blank">dreamweaver网页制作中常用代码</a></li> 
  76. <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法" target="_blank">符合web标准的网页中调用Flash的方法</a></li> 
  77.  </ul>
  78.  <ul id="ax5" style="display:none">
  79. <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> 
  80. <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> 
  81. <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> 
  82. <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码" target="_blank">dreamweaver网页制作中常用代码</a></li> 
  83. <li><span class="box_r">01-21</span><a href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法" target="_blank">符合web标准的网页中调用Flash的方法</a></li> 
  84.  </ul>
  85.  </div>
  86. </div>
  87. <p>onclick事件</p>
  88. <div class="Tab">
  89.  <div class="title">
  90.  <a href="#" id="b1" class="n1" onclick="Tab('b','bx',6,1)"><span>JAVA</span></a>
  91.  <a href="#" id="b2" class="n2" onclick="Tab('b','bx',6,2)"><span>VB</span></a>
  92.  <a href="#" id="b3" class="n2" onclick="Tab('b','bx',6,3)"><span>VC++</span></a>
  93.  <a href="#" id="b4" class="n2" onclick="Tab('b','bx',6,4)"><span>JQUERY</span></a>
  94.  <a href="#" id="b5" class="n2" onclick="Tab('b','bx',6,5)"><span>NEXT WHICH ONE……</span></a>
  95.  <div></div> 
  96.  </div>
  97.  <div class="tabcon">
  98.  <ul id="bx1">
  99. <li><span class="box_r">04-05</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10592" title="北京铁道工程机电技术研究所网站欣赏" target="_blank">北京铁道工程机电技术研究所网站欣赏</a></li> 
  100. <li><span class="box_r">04-03</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10516" title="武汉市常青一中页面设计欣赏" target="_blank">武汉市常青一中页面设计欣赏</a></li> 
  101. <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> 
  102. <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> 
  103. <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> 
  104. <li><span class="box_r">03-07</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=10040" title="湖南理工学院后勤处网站欣赏" target="_blank">湖南理工学院后勤处网站欣赏</a></li> 
  105. <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> 
  106.  </ul>
  107.  <ul id="bx2" style="display:none">
  108. <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> 
  109. <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> 
  110. <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> 
  111. <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> 
  112. <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> 
  113. <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>
  114.  </ul>
  115.  <ul id="bx3" style="display:none">
  116.  <li><span class="box_r">04-05</span><a href="/html/?action-viewthread-tid-10591" title="巴西设计师Marcel Bittencourt作品欣赏" target="_blank">巴西设计师Marcel Bittencourt作品欣赏</a></li> 
  117. <li><span class="box_r">01-28</span><a href="/html/?action-viewthread-tid-9851" title="转载作品：三松食品包装设计" target="_blank">转载作品：三松食品包装设计</a></li> 
  118. <li><span class="box_r">01-16</span><a href="/html/?action-viewthread-tid-9450" title="39张为您带来灵感的海报设计作品" target="_blank">39张为您带来灵感的海报设计作品</a></li> 
  119. <li><span class="box_r">01-07</span><a href="/html/?action-viewthread-tid-9128" title="2010年精选漂亮的名片设计欣赏" target="_blank">2010年精选漂亮的名片设计欣赏</a></li> 
  120. <li><span class="box_r">01-06</span><a href="/html/?action-viewthread-tid-9084" title="性感人物类PS特效精彩设计作品7件" target="_blank">性感人物类PS特效精彩设计作品7件</a></li> 
  121.  </ul>
  122.  <ul id="bx4" style="display:none">
  123.  <li><span class="box_r">10-18</span><a href="/html/?action-viewthread-tid-7038" title="创意的运动品牌海报作品设计欣赏" target="_blank">创意的运动品牌海报作品设计欣赏</a></li> 
  124. <li><span class="box_r">10-01</span><a href="/html/?action-viewthread-tid-6721" title="标志设计元素运用实例：咖啡" target="_blank">标志设计元素运用实例：咖啡</a></li> 
  125. <li><span class="box_r">09-08</span><a href="/html/?action-viewthread-tid-6209" title="一组很SEX且幽默的女性主题插画！" target="_blank">一组很SEX且幽默的女性主题插画！</a></li> 
  126. <li><span class="box_r">09-08</span><a href="/html/?action-viewthread-tid-6208" title="五粮液／酿神酒系列包装" target="_blank">五粮液／酿神酒系列包装</a></li> 
  127. <li><span class="box_r">09-04</span><a href="/html/?action-viewthread-tid-6102" title="法国艾乐优（国际）集团系列产品包装设计" target="_blank">法国艾乐优（国际）集团系列产品包装设计</a></li> 
  128.  </ul>
  129.  <ul id="bx5" style="display:none">
  130.  <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> 
  131. <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> 
  132. <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> 
  133. <li><span class="box_r">08-18</span><a href="http://www.websjy.com/bbs/viewthread.php?tid=5528" title="创意无极限（平面字体创意广告欣赏）" target="_blank">创意无极限（平面字体创意广告欣赏）</a></li> 
  134. <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> 
  135. <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> 
  136.  </ul>
  137.  </div>
  138. </div>
  139. </div>
  140. </body>
  141. </html>

 

代码中所用到的图片：

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (600人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号