![](https://csdnimg.cn/release/download_crawler_static/18428602/bg1.jpg)
第
22
卷第
1
期
2012
年
3
月
将阳理工学院学报(自然科学版}
Journal
of
Luoyang
Institute
of
Science
and
Tecbnology
(Natural
Sc
ience
Edition)
基于
CSS
和
JavaScript
的网页选项卡的设计和实现
张红琴,自林如
(河南质量工程职业学院现代教育技术研究中心,河南平顶山
467001
)
Vol.22
No.l
Mar.
2012
摘
要
g
在现今的网页设计中,网页选项卡的应用非常广泛.用
HTML
编写网页内容、
CSS
设计内容样式、
Java
Sc
ript
实现事件驱动,通过理论分析和代
A
结合,实现了网页选项卡的制作.该方法设计的网页选项卡,在页
函中已装载了全部内容,只是有部分内容被隐藏起来,只有被激活的内容显示出来,并且切挨过程中不用刷新页
函,或少了服务器的负担,因此砰到了卢
7
泛的应用.
关键词
CSS;
JavaScript;
选项卡;网页
HT
l'钮,
DOI:I0.3969/j.issn.1674-5043.2012.01.010
中固分类号
:T
P3
93
丈献标志码
:A
文章编号
1674-5043(2012
)0
1-
例
40
-0
5
CSS[1
1
是
Cascading
Style
Sheets(
层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏
览器执行(属于浏览器解释型语言
b
使用
CSS
可以简化
HTML
页面代码,将表现与内容分离,便于网站维
护
(2
1
•
CSS
是
W3C
定义和维护的标准,主要用于描述页面的显示方式,如字体的颜色、背景、如何排列、
边缘、连线等。如果以后网站的显示风格要改变,则只需要修改
CSS
即可,页面的内容无须改动
l
句。
JavaScript
是一种基于对象的脚本语言,它可以直接对用户输入做出响应,无须经过
Web
服务程序。它对
用户的响应,是采用以事件驱动的方式进行的闷。
CSS
与
JavaScript
都是可以直接在客户端浏览器解析井
执行的脚本语言,通常认为
CSS
是静态的样式设定,而
JavaScript
则是动态的实现各种功能。通过
CSS
与
JavaScript
配合,可以制作出更多奇妙而实用的效果。
选项卡也可以简称为
Tab.
它是将不同的内容重叠放置在某一布局区块内,在重叠的内容区里每次
只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请示显示该层内容区
I
飞
在如今的网页设计中.
Web
界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲
可视的信息量。在这种趋势下.
Tab
这种交互元素成为了一个越来越普遍的应用。基本在每个网站中都
有这样的效果被应用到前台的设计中去。网上随处可见各式各样的选项卡,实际上分为两种
z
一种是切
换各个
Tab
页中的内容时并不刷新浏览器窗口,这说明各个页中的内容实际已经装载到页面上了,只是
被隐藏了起来,只有被激活的
Tab
页内容被显示出来:另一种是切换各个
Tab
页中的内容时,会刷新浏览
器窗口,实际上就是更换了一个新的页面例。以下介绍如何用
CSS
、
JavaScript
和
HTML
制作上述第一种
网页选项卡。
1
网页选项卡设计
选项卡由标签和内容区两部分组成。标签是用户控制切换内容区的操作区域。内容区是
Tab~
素中重
叠的区块,用于显示信息内容。
1)激活状态下的标签和内容区在视觉主看起来应该是一个整体。激活状态下的标签一定要跟其对应
的内容很好地结合起来,激活状态下的标签背景色和内容区的背景色应该相同,一般设置为白色。<<学
习动态选项卡
A"
设计的很好,如图
1
所示。<<学习动态选项卡
B"
设计中标签与内容区中间有一条线分
开,没有很好地结合在一起,如图
2
所示。
2)
激活状态下的标签跟其他标签样式不同。主要是通过背景的不同来区分。如图
1
中当前标签为
收稿日期:
2011-12-29
作者简介
z
张红琴
(1969-)
,女,河南平顶山人,硕士,讲师,主要从事计算机应用和计算机网络方面的研究.