<menu id="ocigx"><listing id="ocigx"><em id="ocigx"></em></listing></menu><em id="ocigx"><track id="ocigx"><strong id="ocigx"></strong></track></em>

<samp id="ocigx"></samp>

<mark id="ocigx"><ruby id="ocigx"><legend id="ocigx"></legend></ruby></mark><bdo id="ocigx"></bdo>

首頁 > 設計 > 實用代碼 > 正文

一個很簡單適用的滑動門代碼-滑動門選項卡

2018-10-16 20:53:06

字體：大中小

來源：轉載

供稿：網友

行為、結構、表現分離的CSS選項，僅供學習參考，使用時候可能會有問題，因為這種寫法需要DIV ID和 a的名稱要一致，否則看不到效果，如果你的ID是中文，那就慘了!

Source Code to Run [www.crfew.com 錯新網]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>CSS選項卡</title><style type="text/css">*{margin:0;padding:0;}body {font-size: 76%}#news_box {margin-left: 39px;width:281px;height:220px;border:1px solid #97BFD4;background:#F1FBFE;margin-top:20px;}#news_box ul {height: 25px;background:url(bg-tag.jpg)  0 2px repeat-x;border-bottom:1px solid #97BFD4}#news_box li {list-style-type: none;float:left;}#news_box li a {text-align: center;display: block;width: 80px;color: #977;cursor: pointer;height:25px;border-right:1px solid #97BFD4}#news_box li a.on {background:#F1FBFE;_position:relative;_bottom:-1px;height:26px;_height:25px;}#news_box div {display: none;padding: 20px}#news_box .thisclass {display: block}</style><script type="text/javascript">function get(){var args = arguments, len = args.length, name = args[0], isStr = typeof name == 'string';var obj = document.getElementById(name);if(!len) return null;if(!args[1]) return isStr && (obj || document.getElementsByTagName(name.toUpperCase()));return isStr && typeof args[1] == 'string' && obj && obj.getElementsByTagName(args[1].toUpperCase());}function toArray(){var args = arguments, len = args.length, result = [];if(len){if(len > 1) result = Array.prototype.slice.call(args, 0);else{var list = args[0], type = typeof list;if(list && (type == 'object' || type == 'function'))for(var i = 0, len = list.length; i < len; i++) result.push(list[i]);if(type == 'number' || type == 'string') result.push(list);}}return result;}function each(a, f){var $break, len = a.length;for(var i = 0; i < len; i++){$break = f.call(a[i], i, a);if($break === true) break;}return a;}function setVisible(m, c){var id = this.childNodes[0].nodeValue;if(this.className == m[2] ) return;each(toArray(get(m[0], m[1])), function(){ this.className = '' });each(toArray(get(c[0], c[1])), function(){ this.className = '' });this.className = m[2];get(id).className = c[2];}function init(o){var menus = o.menulist.split('/'), contents = o.contentlist.split('/');each(toArray(get(menus[0], menus[1])), function(){var id = this.childNodes[0].nodeValue;this.className == menus[2] && id && get(id) && (get(id).className = contents[2]);this.onclick = function(){ setVisible.call(this, menus, contents); }});}window.onload = function(){init({menulist: 'tag/a/on',contentlist: 'news_box/div/thisclass'});}</script></head><body><div id="news_box"><ul id="tag"><li><a class="on">ASP</a></li><li><a>PHP</a></li><li><a>JSP</a></li></ul><div id="ASP"><h2>星期一</h2></div><div id="PHP"><h2>星期二</h2></div><div id="JSP"><h2>星期三</h2></div></div></body></html>

提示:您可以修改后再運行

上一篇：側邊欄導航菜單，溢出式導航-滑動門選項卡

下一篇：淘寶支付寶網站的控制臺菜單-滑動門選項卡

學習交流

phpwind的rewrite重寫原理

phpwind的rewrite重寫原理...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

為什么家庭升級要選激光電視？

2019-10-14 09:23:13

OPPO推出搭載Snapdragon730G的超強功能的新款K5

2019-10-14 08:35:41

360隨身wifi2代怎么使用？好用嗎？

2019-10-11 08:59:55

360旗下魯大師掛牌上市系中國首個硬件評測供應商

2019-10-11 08:54:28

華為Mate30 Pro系統迎更新新增超高清夜攝功能

2019-10-11 08:49:58

華為P40Pro概念圖：麒麟990+鴻蒙系統前后配7顆鏡頭

2019-10-11 08:25:39

疑難解答

圖片精選

網友關注