织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
行为、结构、表现分离的CSS选项，仅供学习参考，使用时候可能会有问题，因为这种写法需要DIV ID和 a的名称要一致，否则看不到效果，如果你的ID是中文，那就惨了!
<!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" mrc="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; 1122123<img src=http://p1.mb5u.com/texiao/0/2010052223052141.jpg>2244234background:url(http://p1.mb5u.com/texiao/0/2010052223052141.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('/'), mrcs = o.mrclist.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 = mrcs[2]); this.onclick = function(){ setVisible.call(this, menus, mrcs); } }); } window.onload = function(){ init({ menulist: 'tag/a/on', mrclist: '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>
所属频道：菜单导航特效/更新时间：2012-11-21