行为、结构、表现分离的CSS选项卡

2024-09-05 12:20:20

字体：大中小

来源：转载

供稿：网友

行为、结构、表现分离的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" 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>ASP</li>     <li>PHP</li>    <li>JSP</li>  </ul>  <div id="ASP">    <h2>星期一</h2>  </div>  <div id="PHP">    <h2>星期二</h2>  </div>  <div id="JSP">    <h2>星期三</h2>  </div> </div></body></html>

上一篇：CSS美化图片做成的导航条

下一篇：淘宝支付宝网站的控制台菜单