行为、结构、表现分离的CSS选项卡_菜单导航特效

行为、结构、表现分离的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

[收藏][报错][返回列表]

行为、结构、表现分离的CSS选项卡_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些