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

作者：佳明妈来源：懒人建站 2009-10-18 人气：

CSS选项卡：行为结构表现分离的CSS选项卡原型。

<!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>JS代码</h2>
  </div>
 
</div>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px;

font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集

整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br

/><br/>
<span>我们为您提供-JS代码，网页图标，网页欣赏模板，SEO优化和各种建站技巧；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。

</span>
</div>
</body>
</html>

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

代码片段：

↓ 查看全文

本文链接：行为结构表现分离的CSS选项卡原型https://www.51xuediannao.com/js/texiao/133.html

行为结构表现分离的CSS选项卡原型由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：竖向的标准结构选项卡
下一篇：可设置一天弹一次的弹出新窗口JS代码

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

行为结构表现分离的CSS选项卡原型-最新评论

导航菜单-热门文章

导航菜单-推荐文章

活跃用户

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

行为结构表现分离的CSS选项卡原型-相关文章

行为结构表现分离的CSS选项卡原型-最新评论

导航菜单-热门文章

导航菜单-推荐文章

活跃用户