JS制作tab选项卡

先看效果图,比较简陋,意思下的哈

下面是代码

<!DOCTYPE>
<html>
<meta charset="UTF-8">
<title></title>
<head>
<style type="text/css">
#div1 a{
	padding: 0 5px;
	color: black;
	text-decoration: none;
	border: #ccc solid 1px;
}
#div1 .active{
	color: white;
	background: red;
}
#div1 div{

	width: 200px;
	height: 200px;
	background: #ccc;
	border: black solid 1px;
	display: none;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
	var oDiv=document.getElementById("div1");
	var aBtn=oDiv.getElementsByTagName("a");
	var aDiv=oDiv.getElementsByTagName("div");
	
	for (var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onmouseover=function ()
		{
			for (var i=0;i<aBtn.length;i++)
			{
				aBtn[i].className="";
				aDiv[i].style.display="none";
			};
			this.className="active";
			aDiv[this.index].style.display="block";
		};
	};	
};
</script>
</head>
<body>

<div id="div1">
	<a class="active" href="javasript:;">教育</a>
	<a href="javasript:;">培育</a>
	<a href="javasript:;">招生</a>
	<a href="javasript:;">出国</a>
	<div style="display:block;">
		教育教育教育教育教育教育教育
	</div>
	<div>
		培育培育培育培育培育培育培育培育培育
	</div>
	<div>
		招生招生招生招生
	</div>
	<div>
		出国出国出国出国出国出国出国出国出国出国出国出国
	</div>
</div>
</body>

</html>

2011年网页设计发展趋势

设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面,足矣?或许五年前是吧!现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计,那么相信你很快会被时代遗弃。2011年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计(responsive design)、持续联系(constant connection)和虚拟现实(virtual reality)。

作为设计师的你,2011年会作神马打算?真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗忘。出色的设计师犹如造梦师,给用户创造一个梦境,让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素:优秀的配色,直观的设计,良好的交互性和快的响应速度。此外,永远不要低估简约的力量。2011年,你的设计不但要考虑笔记本、台式电脑,还要考虑智能手机、上网本和平板电脑等设备。你都准备好了吗?

2011年网页设计趋势有何变化?一起关注11个网页设计趋势热点:

1. 更多的CSS3 + HTML5

这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5,但在2011年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者,新技术(指CSS3+HTML5)将会取而代之。2011年,Flash渐行渐远,魔术师 “HTML5”成为舞台的主角:


Continue reading →

有种体验叫文案

  如果你是一位“细节控”设计师:认为“细节决定成败”,界面上每个像素、每个图标、每种字体都该受到专注,那产品的每个文案亦是重要的。

  什么是产品文案?你标注一个按钮的名字是“提交”还是“保存”;“新建”还是“创建”;用一般举例,还是详细阐述;用什么样的语气说明——这些都是文案。

  百度百科这么描述产品文案的由来:产品设计阶段,UED成员需要大量的介入其中,使得产品设计在易用性,品牌彰显等方面最大化的把产品的价值点呈现给目标用户群体。

  也就是说,在设计界面的时候,要设身处地为使用这个产品的用户着想,使用和用户一致的语言。只要它是web产品,就一定避免使用技术行话和多数人搞不懂的语言。

  界面用词和设计常常相辅相成。常见的界面设计文案有:
1、图标的文字说明

图标几乎都要有文字说明,表述更加直观。图为facebook图标旁的文字说明。
2、表单要有示例和说明。

填写表单项要有所填内容的示例,图为新浪微博注册信息,其中邮箱填写格式就有提示文字和示例。
3、按钮要有标签。
以“注册”为例,目前就有很多不同的文案说法:



你觉得哪个最直观呢?
4、流程要一步一步提示。

 向导模式中,常常要有简明的文案做出步骤的说明。图为京东上使用向导(wizard)快速引导不熟悉流程的顾客完成付款。
5、退款等政策也要有个清楚的说明。

当当网的退款说明清楚明了,估计用户很多直接选择网上退款,减少了很多客服压力。
Continue reading →

50个令人叹为观止的JavaScript应用站点

随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web 开发者看来,Flash 并不是他们的首要选择,因为 Flash 至今对搜索引擎仍是不透明的,另外,Flash 的渲染需要浏览器插件,而 JavaScript 的一切都是本地的。

Tabs

Aviary – http://aviary.com/

Aviary 使用了非常圆润的 Tab 效果,点击 Tab 后,渐出渐入的栏目介绍性内容非常漂亮,它的基于 JavaScript 的下拉菜单也美轮美奂。

Toolani – http://www.toolani.de/

黄色内容区块下方的,基于 jQuery 的 Tabs 非常漂亮。

Podcasttuneup – http://www.podcast-tuneup.com/

漂亮的 Tab 带着有趣的上卷与下卷效果。作为对比,该 Tab 框上方还有一个基于 Flash 的 Tab 框,可以看出,Flash 的反应速度明细要快得多,然而却要等半天的时间加载。

Adworks – http://www.adworks.ro/

尽管这些 Tab 并不象前面提到的那几个,带渐入溅出效果,但那些大图标实在惹人喜欢。

We are Sofa – http://www.madebysofa.com/

如果你想用文字式 Tab 这个网站是个很好的例子。

幻灯式内容

monofactor -http://www.monofactor.com/

这个重新设计后的站点使用幻灯风格展示作者的作品。

Alex Buga – http://www.alexbuga.com/

Alex Buga 自诩为 Web 设计超级明星,使用了类似幻灯片的方式展示他最近的活动。位于右上角的那个主导航条也很 Cool,不过该站点大量使用了 Ajax。

Coda, one Window Web development – http://www.panic.com/coda/

这个站可谓家喻户晓。是很多人获得灵感的地方。

Kobe – http://www.arcinspirations.com/kobe/

漂亮的幻灯式内容效果,并结合了 Flash。(该站使用了单页式设计)

Dibusoft mmdv – http://www.dibusoft.com/

Dibusoft 使用了水平滚动图片加垂直滚动文字使用内容的幻灯式变换。它的主菜单则使用 JavaScript 实现 Lava Lamp 效果。

Continue reading →