表现、结构、行为分离的选项卡效果！

作者:cmscn 日期:2008-12-28

字体大小: 小中大

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>tes</title>
		<style type="text/css">
			body{font-size: 76%}
			#tab ul {height: 14px}
			*html #tab ul {height: 10px}
			#tab li{list-style-type: none; display: inline}
			#tab li a{text-align: center; float: left; display: block; width: 50px; font-weight: bold; color: #977; padding: 5px; cursor: pointer; background: #ecc; border-top: 1px solid #000}
			#tab li a.on{background: #c99}
			#tab div{margin-left: 39px; width: 260px; border: 1px solid #000; display: none; padding: 20px}
			*html #tab div {margin-top: -19px}
			#tab div.vis{display: block}
			.event {font-weight: bold; font-size: 1.2em}
			.note {margin-left: 15px; color: #666}
		</style>
		<script type="text/javascript">
			function all (arr, func)
			{
				for (var i=0,a; a = arr [i]; i++)
				{
					func (a);
				}
			}
			function show (event)
			{
				var e = event || window.event;
				var src = e.srcElement || e.target;
				divs = document.getElementById ('tab').getElementsByTagName ('div');
				all (divs, function (d) {if (d.className != '') {d.className = '';}});
				links = document.getElementById ('tab').getElementsByTagName ('a');
				all (links, function (l) {if (l.className != '') {l.className = '';}});
				src.className = 'on';
				document.getElementById (src.innerHTML).className = 'vis';
			}
			function init ()
			{
				links = document.getElementById ('tab').getElementsByTagName ('a');
				all (links, function (l) {l.onclick = show});
			}
			window.onload = init;
		</script>
	</head>
	<body>
		<div id="tab">
			<ul>
				<li><a class="on">mon</a></li>
				<li><a>tus</a></li>
				<li><a>wed</a></li>
				<li><a>thu</a></li>
				<li><a>fri</a></li>
			</ul>
			<div id="mon" class="vis">
				<h2>星期一</h2>
				<p class="event">20 个页面的修改</p>
				<p class="note">工作量不大，因为使用 DreamWeaver 批量修改</p>
			</div>
			<div id="tus">
				<h2>星期二</h2>
				<p class="event">60 个页面的修改</p>
				<p class="note">页面数量较多，批量修改也花了一些时间</p>
				<p class="event">新闻调查系统修改</p>
				<p class="note">页面布局问题，比较复杂，用了较多时间修改。</p>
			</div>
			<div id="wed">
				<h2>星期三</h2>
				<p class="event">新闻调查系统修改</p>
				<p class="note">昨天已经修改完成，交给 william 检查</p>
				<p class="event">alibaba 调研</p>
				<p class="note">为设计网上销售平台研究 alibaba 网站，在 alibaba 的中英文网站分别上注册了账号，研究 alibaba 网站的功能</p>
			</div>
			<div id="thu">
				<h2>星期四</h2>
				<p class="event">学习 ruby on rails 使用</p>
				<p class="note">作为技术储备计划学习 ror 及 django 的使用，由于对 python 与 ruby 有一定的了解，主要精力集中在开发框架上</p>
			</div>
			<div id="fri">
				<h2>星期五</h2>
				<p class="event">学习 django 使用，与 ror 对比</p>
				<p class="note">今天研究了一下 django 框架，与 ror 初步对比了一下。从稳定性上来说 ror 强于 django，开发方面初步没发现较大的差距。</p>
			</div>
		</div>
	</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: 选项卡

相关日志:

评论: 0 | 引用: 0 | 查看次数: 556

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 20 字 \| UBB代码关闭 \| [img]标签关闭

表现、结构、行为分离的选项卡效果！

作者:cmscn 日期:2008-12-28

feed

User Panel

Archive

Search