五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現在的位置： 365建站網 > 365文章 > CSS+JS打造的自適應寬度的滑動門和選項卡

CSS+JS打造的自適應寬度的滑動門和選項卡

文章來源：365jz.com     點擊數：609    更新時間：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  title="IE瀏覽器的CSS識別技術（CSS Hacks）" target="_blank">IE瀏覽器的CSS識別技術（CSS Hacks）</a></li> 
<li><span class="box_r">04-02</span><a  title="CSS3實現的很炫的按鈕" target="_blank">CSS3實現的很炫的按鈕</a></li> 
<li><span class="box_r">04-02</span><a  title="兼容IE6和Firefox,DIV實現input垂直居中" target="_blank">兼容IE6和Firefox,DIV實現input垂直居中</a></li> 
<li><span class="box_r">03-17</span><a  title="神奇的css屬性pointer-events" target="_blank">神奇的css屬性pointer-events</a></li> 
<li><span class="box_r">03-14</span><a  title="CSS3屬性之二：陰影：box-shadow" target="_blank">CSS3屬性之二：陰影：box-shadow</a></li> 
<li><span class="box_r">03-14</span><a  title="內容排版：CSS實現強制不換行、自動換行、強制換行" target="_blank">內容排版：CSS實現強制不換行、自動換行...</a></li> 
<li><span class="box_r">03-09</span><a  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  title="基于jquery的表格排序效果" target="_blank">基于jquery的表格排序效果</a></li> 
<li><span class="box_r">04-03</span><a  title="兩種方法實現列表最新幾條高亮效果" target="_blank">兩種方法實現列表最新幾條高亮效果</a></li> 
<li><span class="box_r">04-02</span><a  title="簡單的鼠標移到圖片上提示效果" target="_blank">簡單的鼠標移到圖片上提示效果</a></li> 
<li><span class="box_r">03-31</span><a  title="不帶圖片的圓角CSS box及帶箭頭框" target="_blank">不帶圖片的圓角CSS box及帶箭頭框</a></li> 
<li><span class="box_r">03-29</span><a  title="JQuery常用方法一覽，大家收藏吧" target="_blank">JQuery常用方法一覽，大家收藏吧</a></li> 
<li><span class="box_r">03-28</span><a  title="超鏈接中的 javascript:void(0);" target="_blank">超鏈接中的 javascript:void(0);</a></li> 
<li><span class="box_r">03-26</span><a  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布局規(guī)則" target="_blank">了解Dreamweaver CS3的CSS布局規(guī)則</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布局規(guī)則" target="_blank">了解Dreamweaver CS3的CSS布局規(guī)則</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布局規(guī)則" target="_blank">了解Dreamweaver CS3的CSS布局規(guī)則</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  title="北京鐵道工程機電技術研究所網站欣賞" target="_blank">北京鐵道工程機電技術研究所網站欣賞</a></li> 
<li><span class="box_r">04-03</span><a  title="武漢市常青一中頁面設計欣賞" target="_blank">武漢市常青一中頁面設計欣賞</a></li> 
<li><span class="box_r">04-02</span><a  title="32套免費的網頁、移動設備UI元素和模板" target="_blank">32套免費的網頁、移動設備UI元素和模板</a></li> 
<li><span class="box_r">03-17</span><a  title="分享35個最新的單頁網站設計案例欣賞" target="_blank">分享35個最新的單頁網站設計案例欣賞</a></li> 
<li><span class="box_r">03-14</span><a  title="10個漂亮的JQuery網站欣賞" target="_blank">10個漂亮的JQuery網站欣賞</a></li> 
<li><span class="box_r">03-07</span><a  title="湖南理工學院后勤處網站欣賞" target="_blank">湖南理工學院后勤處網站欣賞</a></li> 
<li><span class="box_r">03-28</span><a  title="金和OA管理軟件設計欣賞" target="_blank">金和OA管理軟件設計欣賞</a></li> 
 </ul>
 <ul id="bx2" style="display:none">
<li><span class="box_r">10-19</span><a  title="Fireworks制作經典的掃光字GIF動畫" target="_blank">Fireworks制作經典的掃光字GIF動畫</a></li> 
<li><span class="box_r">10-18</span><a  title="Fireworks實例教程：制作轉動的四葉草效果" target="_blank">Fireworks實例教程：制作轉動的四葉草效果</a></li> 
<li><span class="box_r">10-12</span><a  title="Fireworks教程:不同的切角效果" target="_blank">Fireworks教程:不同的切角效果</a></li> 
<li><span class="box_r">03-24</span><a  title="Fireworks教程：制作紅墻磚頭效果" target="_blank">Fireworks教程：制作紅墻磚頭效果</a></li> 
<li><span class="box_r">03-24</span><a  title="Fireworks教程：制作層層激發(fā)彩光魅力" target="_blank">Fireworks教程：制作層層激發(fā)彩光魅力</a></li> 
<li><span class="box_r">04-25</span><a  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="創(chuàng)意的運動品牌海報作品設計欣賞" target="_blank">創(chuàng)意的運動品牌海報作品設計欣賞</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="法國艾樂優(yōu)（國際）集團系列產品包裝設計" target="_blank">法國艾樂優(yōu)（國際）集團系列產品包裝設計</a></li> 
 </ul>
 <ul id="bx5" style="display:none">
 <li><span class="box_r">10-31</span><a  title="78個創(chuàng)意廣告欣賞（二）" target="_blank">78個創(chuàng)意廣告欣賞（二）</a></li> 
<li><span class="box_r">10-31</span><a  title="78個創(chuàng)意廣告欣賞" target="_blank">78個創(chuàng)意廣告欣賞</a></li> 
<li><span class="box_r">09-08</span><a  title="超酷創(chuàng)意的白木材質雜志和CD架" target="_blank">超酷創(chuàng)意的白木材質雜志和CD架</a></li> 
<li><span class="box_r">08-18</span><a  title="創(chuàng)意無極限（平面字體創(chuàng)意廣告欣賞）" target="_blank">創(chuàng)意無極限（平面字體創(chuàng)意廣告欣賞）</a></li> 
<li><span class="box_r">08-13</span><a  title="Amber Hooks 書籍設計" target="_blank">Amber Hooks 書籍設計</a></li> 
<li><span class="box_r">08-04</span><a  title="2010年最有殺傷力的一套精彩文案" target="_blank">2010年最有殺傷力的一套精彩文案</a></li> 
 </ul>
 </div>
</div>
</div>
</body>
</html>

 

代碼中所用到的圖片：

如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網友會為你解答??！ 點擊進入論壇

發(fā)表評論 (609人查看，0條評論)
請自覺遵守互聯網相關的政策法規(guī)，嚴禁發(fā)布色情、暴力、反動的言論。
昵稱：
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學習

業(yè)務咨詢

· 技術支持
· 服務時間：9:00-18:00
365建站網二維碼

Powered by 365建站網 RSS地圖 HTML地圖

copyright © 2013-2024 版權所有 鄂ICP備17013400號