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

CSS+JS打造的自适应宽度的滑动门和选项卡，米有任何技术含量，仅此一记。

?

<p><!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style><!--

  

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("http://www.websjy.com/bbs/images/tab_bg.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}

.tabcon ul li a{ float:left;}

.tabcon ul li span{ float:right; margin-right:20px;}

--></style>

<script type="text/javascript">// <![CDATA[

  

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>

</p>

<p style="text-align: left;">CSS+JS打造的自适应宽度的滑动门和选项卡，米有任何技术含量，仅此一记。</p>

<div style="width: 500px; margin: 0 auto;">

<p>onmouseover事件</p>

<div class="Tab">

<div class="title"><a href="#" onmouseover="Tab('a','ax',6,1)" class="n1" id="a1"><span>ASP</span></a> <a href="#" onmouseover="Tab('a','ax',6,2)" class="n2" id="a2"><span>PHP</span></a> <a href="#" onmouseover="Tab('a','ax',6,3)" class="n2" id="a3"><span>DELPHI</span></a> <a href="#" onmouseover="Tab('a','ax',6,4)" class="n2" id="a4"><span>MOOTOOLS</span></a> <a href="#" onmouseover="Tab('a','ax',6,5)" class="n2" id="a5"><span>WECLCOME TO</span></a>

<div></div>

</div>

<div class="tabcon">

<ul id="ax1">

<li><span class="box_r">04-02</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10513" title="IE浏览器的CSS识别技术（CSS Hacks）">IE浏览器的CSS识别技术（CSS Hacks）</a></li>

<li><span class="box_r">04-02</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10511" title="CSS3实现的很炫的按钮">CSS3实现的很炫的按钮</a></li>

<li><span class="box_r">04-02</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10510" title="兼容IE6和Firefox,DIV实现input垂直居中">兼容IE6和Firefox,DIV实现input垂直居中</a></li>

<li><span class="box_r">03-17</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10260" title="神奇的css属性pointer-events">神奇的css属性pointer-events</a></li>

<li><span class="box_r">03-14</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10206" title="CSS3属性之二：阴影：box-shadow">CSS3属性之二：阴影：box-shadow</a></li>

<li><span class="box_r">03-14</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10205" title="内容排版：CSS实现强制不换行、自动换行、强制换行">内容排版：CSS实现强制不换行、自动换行...</a></li>

<li><span class="box_r">03-09</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10132" title="去除a链的虚线框 兼容IE FF">去除a链的虚线框 兼容IE FF</a></li>

</ul>

<ul id="ax2" style="display: none;">

<li><span class="box_r">04-06</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10603" title="基于jquery的表格排序效果">基于jquery的表格排序效果</a></li>

<li><span class="box_r">04-03</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10524" title="两种方法实现列表最新几条高亮效果">两种方法实现列表最新几条高亮效果</a></li>

<li><span class="box_r">04-02</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10509" title="简单的鼠标移到图片上提示效果">简单的鼠标移到图片上提示效果</a></li>

<li><span class="box_r">03-31</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10456" title="不带图片的圆角CSS box及带箭头框">不带图片的圆角CSS box及带箭头框</a></li>

<li><span class="box_r">03-29</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10437" title="JQuery常用方法一览，大家收藏吧">JQuery常用方法一览，大家收藏吧</a></li>

<li><span class="box_r">03-28</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10413" title="超链接中的 javascript:void(0);">超链接中的 javascript:void(0);</a></li>

<li><span class="box_r">03-26</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10407" title="两个基于jQuery的渐隐渐显图片轮换幻灯片">两个基于jQuery的渐隐渐显图片轮换幻灯片</a></li>

</ul>

<ul id="ax3" style="display: none;">

<li><span class="box_r">04-19</span><a target="_blank" href="/html/?action-viewthread-tid-243" title="在IE中调用 Dreamweaver 编辑网页">在IE中调用 Dreamweaver 编辑网页</a></li>

<li><span class="box_r">06-11</span><a target="_blank" href="/html/?action-viewthread-tid-4320" title="Dreamweaver教程：轻松制作网页反馈表单">Dreamweaver教程：轻松制作网页反馈表单</a></li>

<li><span class="box_r">10-15</span><a target="_blank" href="/html/?action-viewthread-tid-190" title="Dreamweaver CS3新功能描述">Dreamweaver CS3新功能描述</a></li>

<li><span class="box_r">01-10</span><a target="_blank" href="/html/?action-viewthread-tid-192" title="用Spry轻松将XML数据显示到HTML页">用Spry轻松将XML数据显示到HTML页</a></li>

<li><span class="box_r">01-11</span><a target="_blank" href="/html/?action-viewthread-tid-1884" title="了解Dreamweaver CS3的CSS布局规则">了解Dreamweaver CS3的CSS布局规则</a></li>

<li><span class="box_r">01-21</span><a target="_blank" href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码">dreamweaver网页制作中常用代码</a></li>

<li><span class="box_r">01-21</span><a target="_blank" href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法">符合web标准的网页中调用Flash的方法</a></li>

</ul>

<ul id="ax4" style="display: none;">

<li><span class="box_r">07-14</span><a target="_blank" href="/html/?action-viewthread-tid-191" title="Dreamweaver CS3集成Spry效果试用">Dreamweaver CS3集成Spry效果试用</a></li>

<li><span class="box_r">04-19</span><a target="_blank" href="/html/?action-viewthread-tid-1639" title="将PSD效果图制作成HTML+CSS文件">将PSD效果图制作成HTML+CSS文件</a></li>

<li><span class="box_r">04-19</span><a target="_blank" href="/html/?action-viewthread-tid-243" title="在IE中调用 Dreamweaver 编辑网页">在IE中调用 Dreamweaver 编辑网页</a></li>

<li><span class="box_r">06-11</span><a target="_blank" href="/html/?action-viewthread-tid-4320" title="Dreamweaver教程：轻松制作网页反馈表单">Dreamweaver教程：轻松制作网页反馈表单</a></li>

<li><span class="box_r">10-15</span><a target="_blank" href="/html/?action-viewthread-tid-190" title="Dreamweaver CS3新功能描述">Dreamweaver CS3新功能描述</a></li>

<li><span class="box_r">01-10</span><a target="_blank" href="/html/?action-viewthread-tid-192" title="用Spry轻松将XML数据显示到HTML页">用Spry轻松将XML数据显示到HTML页</a></li>

</ul>

<ul id="ax5" style="display: none;">

<li><span class="box_r">07-14</span><a target="_blank" href="/html/?action-viewthread-tid-191" title="Dreamweaver CS3集成Spry效果试用">Dreamweaver CS3集成Spry效果试用</a></li>

<li><span class="box_r">04-19</span><a target="_blank" href="/html/?action-viewthread-tid-1639" title="将PSD效果图制作成HTML+CSS文件">将PSD效果图制作成HTML+CSS文件</a></li>

<li><span class="box_r">01-11</span><a target="_blank" href="/html/?action-viewthread-tid-1884" title="了解Dreamweaver CS3的CSS布局规则">了解Dreamweaver CS3的CSS布局规则</a></li>

<li><span class="box_r">01-21</span><a target="_blank" href="/html/?action-viewthread-tid-833" title="dreamweaver网页制作中常用代码">dreamweaver网页制作中常用代码</a></li>

<li><span class="box_r">01-21</span><a target="_blank" href="/html/?action-viewthread-tid-2592" title="符合web标准的网页中调用Flash的方法">符合web标准的网页中调用Flash的方法</a></li>

</ul>

</div>

</div>

<p>onclick事件</p>

<div class="Tab">

<div class="title"><a href="#" onclick="Tab('b','bx',6,1)" class="n1" id="b1"><span>JAVA</span></a> <a href="#" onclick="Tab('b','bx',6,2)" class="n2" id="b2"><span>VB</span></a> <a href="#" onclick="Tab('b','bx',6,3)" class="n2" id="b3"><span>VC++</span></a> <a href="#" onclick="Tab('b','bx',6,4)" class="n2" id="b4"><span>JQUERY</span></a> <a href="#" onclick="Tab('b','bx',6,5)" class="n2" id="b5"><span>NEXT WHICH ONE……</span></a>

<div></div>

</div>

<div class="tabcon">

<ul id="bx1">

<li><span class="box_r">04-05</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10592" title="北京铁道工程机电技术研究所网站欣赏">北京铁道工程机电技术研究所网站欣赏</a></li>

<li><span class="box_r">04-03</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10516" title="武汉市常青一中页面设计欣赏">武汉市常青一中页面设计欣赏</a></li>

<li><span class="box_r">04-02</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10387" title="32套免费的网页、移动设备UI元素和模板">32套免费的网页、移动设备UI元素和模板</a></li>

<li><span class="box_r">03-17</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10252" title="分享35个最新的单页网站设计案例欣赏">分享35个最新的单页网站设计案例欣赏</a></li>

<li><span class="box_r">03-14</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10067" title="10个漂亮的JQuery网站欣赏">10个漂亮的JQuery网站欣赏</a></li>

<li><span class="box_r">03-07</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10040" title="湖南理工学院后勤处网站欣赏">湖南理工学院后勤处网站欣赏</a></li>

<li><span class="box_r">03-28</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=10020" title="金和OA管理软件设计欣赏">金和OA管理软件设计欣赏</a></li>

</ul>

<ul id="bx2" style="display: none;">

<li><span class="box_r">10-19</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=7090" title="Fireworks制作经典的扫光字GIF动画">Fireworks制作经典的扫光字GIF动画</a></li>

<li><span class="box_r">10-18</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=7055" title="Fireworks实例教程：制作转动的四叶草效果">Fireworks实例教程：制作转动的四叶草效果</a></li>

<li><span class="box_r">10-12</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=2516" title="Fireworks教程:不同的切角效果">Fireworks教程:不同的切角效果</a></li>

<li><span class="box_r">03-24</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=2271" title="Fireworks教程：制作红墙砖头效果">Fireworks教程：制作红墙砖头效果</a></li>

<li><span class="box_r">03-24</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=2211" title="Fireworks教程：制作层层激发彩光魅力">Fireworks教程：制作层层激发彩光魅力</a></li>

<li><span class="box_r">04-25</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=1622" title="Fireworks教程：绘制立体文字图标">Fireworks教程：绘制立体文字图标</a></li>

</ul>

<ul id="bx3" style="display: none;">

<li><span class="box_r">04-05</span><a target="_blank" href="/html/?action-viewthread-tid-10591" title="巴西设计师Marcel Bittencourt作品欣赏">巴西设计师Marcel Bittencourt作品欣赏</a></li>

<li><span class="box_r">01-28</span><a target="_blank" href="/html/?action-viewthread-tid-9851" title="转载作品：三松食品包装设计">转载作品：三松食品包装设计</a></li>

<li><span class="box_r">01-16</span><a target="_blank" href="/html/?action-viewthread-tid-9450" title="39张为您带来灵感的海报设计作品">39张为您带来灵感的海报设计作品</a></li>

<li><span class="box_r">01-07</span><a target="_blank" href="/html/?action-viewthread-tid-9128" title="2010年精选漂亮的名片设计欣赏">2010年精选漂亮的名片设计欣赏</a></li>

<li><span class="box_r">01-06</span><a target="_blank" href="/html/?action-viewthread-tid-9084" title="性感人物类PS特效精彩设计作品7件">性感人物类PS特效精彩设计作品7件</a></li>

</ul>

<ul id="bx4" style="display: none;">

<li><span class="box_r">10-18</span><a target="_blank" href="/html/?action-viewthread-tid-7038" title="创意的运动品牌海报作品设计欣赏">创意的运动品牌海报作品设计欣赏</a></li>

<li><span class="box_r">10-01</span><a target="_blank" href="/html/?action-viewthread-tid-6721" title="标志设计元素运用实例：咖啡">标志设计元素运用实例：咖啡</a></li>

<li><span class="box_r">09-08</span><a target="_blank" href="/html/?action-viewthread-tid-6209" title="一组很SEX且幽默的女性主题插画！">一组很SEX且幽默的女性主题插画！</a></li>

<li><span class="box_r">09-08</span><a target="_blank" href="/html/?action-viewthread-tid-6208" title="五粮液／酿神酒系列包装">五粮液／酿神酒系列包装</a></li>

</ul>

<ul id="bx5" style="display: none;">

<li><span class="box_r">10-31</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=7397" title="78个创意广告欣赏（二）">78个创意广告欣赏（二）</a></li>

<li><span class="box_r">10-31</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=7395" title="78个创意广告欣赏">78个创意广告欣赏</a></li>

<li><span class="box_r">09-08</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=6186" title="超酷创意的白木材质杂志和CD架">超酷创意的白木材质杂志和CD架</a></li>

<li><span class="box_r">08-18</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=5528" title="创意无极限（平面字体创意广告欣赏）">创意无极限（平面字体创意广告欣赏）</a></li>

<li><span class="box_r">08-13</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=5433" title="Amber Hooks 书籍设计">Amber Hooks 书籍设计</a></li>

<li><span class="box_r">08-04</span><a target="_blank" href="http://www.websjy.com/bbs/viewthread.php?tid=5247" title="2010年最有杀伤力的一套精彩文案">2010年最有杀伤力的一套精彩文案</a></li>

</ul>

</div>

</div>

</div>