一个很简单适用的滑动门代码-滑动门选项卡

2018-10-16 20:53:06

字体：大中小

来源：转载

供稿：网友

行为、结构、表现分离的CSS选项，仅供学习参考，使用时候可能会有问题，因为这种写法需要DIV ID和 a的名称要一致，否则看不到效果，如果你的ID是中文，那就惨了!

Source Code to Run [www.cuoxin.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>

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

上一篇：侧边栏导航菜单，溢出式导航-滑动门选项卡

下一篇：淘宝支付宝网站的控制台菜单-滑动门选项卡