较好的视觉效果的网页选项卡
您现在的位置： 学网 >> 网页设计 >> JS教程 >> JS实例 >> 正文
【JS实例】

JS实例:较好的视觉效果的网页选项卡

[ 来源：网页特效 | 作者：网页选项卡 | 时间：2009-2-20 | 去论坛]
选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，不只可以应用在导航菜单，一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。

“选项卡”一般和JavaScirpt及Ajax结合使用，以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合，完成切换的效果。

以下是代码片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋体", SimSun, serif;
background:#fff;
color:#000;
}
ul,
li,
dl,
dt,
dd {
margin:0;
padding:0;  /* 清除浏览器默认的margin和padding值 */
}
ul,
li {
list-style:none outside;  /* 清除浏览器中列表项默认的占位 */
}
a {
text-decoration:none;
}
img {
border:0;
}
/* 选项卡整体外观定义 */
.tabList {
width:400px;
height:160px;
overflow:hidden;
}
.tabList .tabBox {
height:100%;
position:relative;
background:#09c;
}
.tabList .tabBox li {
float:left;
width:25%;
text-align:center;
}
.tabList h4 {
margin:0;
height:26px;
font-size:1em;
line-height:22px;
}
.tabList h4 a {
color:#039;
font-weight:normal;
display:block;
background:#bfeafd url() no-repeat top right;
padding-right:5px;
}
.tabList h4 a:hover,
.tabList .tabOn h4 a{
background-position:0 -50px;
}
.tabList h4 a:hover span,
.tabList .tabOn h4 a span {
background-position:right -50px;
}
.tabList .tabContentBox li{
width:auto;
margin-top:0;
}
.tabList .tabContentBox {
width:390px;
height:130px;
border:1px solid #069;
text-align:left;
overflow:hidden;
background:#fff;
position:absolute;
top:22px;
left:0;
display:none;
margin:4px;
}
.tabList li:hover .tabContentBox,
.tabList .tabOn .tabContentBox {
display:block;
}
/* 以下是对各项内容的CSS定义 */
.tabList .tabContentBox .blog,
.tabList .tabContentBox .group {
color:#999;
line-height:2em;
margin:5px;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt,
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd{
float:left;
border-bottom: 1px dotted #9cf;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt {
width:60%;
white-space:nowrap;
overflow:hidden;
clear:left;
font-size:1.1em;
}
.tabList .tabContentBox .blog dt a,
.tabList .tabContentBox .group dt a {
color:#039;
display:block;
margin-left:5px;
padding-left:12px;
background: url(<!--
window.onload = tabEffect;
function tabEffect()
{
var allElements = document.getElementsByTagName('*');
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf('tabOption') >= 0)
{
allElements[i].onmouseover = mouseOver;
}
}
}
function mouseOver()
{
tabList = this.parentNode;
tabOptions = tabList.getElementsByTagName("li");
for (var i=0; i<tabOptions.length; i++)
{
if (tabOptions[i].className.indexOf('tabOption') >= 0)
{
tabOptions[i].className = "tabOption";
}
}
this.className += " tabOn";
}
-->
</script>
</head>
<body>
<div class="tabList" id="tabList1">
<ul class="tabBox">
<li class="tabOption tabOn"><h4><a href="/blog/" title="单击，跳转到所有[日志]列表"><span>日志</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent blog">
<dt><a href="http://www.webyi.com/special/20090206/11764.html" title="JavaScript入门教程！">JavaScript入门教程！</a></dt>
<dd class="name"><a href="#11" title="">QUESTER</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/2" title="日志标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
<dd class="name"><a href="#11" title="作者：snl">snl</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/3" title="日志标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>
<dd class="name"><a href="#11" title="作者：豆猫">豆猫</a></dd>
<dd>2009-01-10</dd>
<dt><a href="http://www.webyi.com/wschool/design/photoshop/20090218/12124.html" title="Photoshop制作超酷古典怀旧味的扑克牌">Photoshop制作超酷古典怀旧味的扑克牌</a></dt>
<dd class="name"><a href="#11" title="作者：greengnn">greengnn</a></dd>
<dd>2009-01-10</dd>
<dt><a href="http://www.webyi.com/photoshop/" title="日志标题：Photoshop CS3教程">Photoshop CS3教程</a></dt>
<dd class="name"><a href="#11" title="作者：amethyst01">amethyst01</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
<li class="tabOption"><h4><a href="/album/" title="单击，跳转到所有[相册]列表"><span>相册</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent album">
<li><a href="/img1" title="查看相册内容"><img src="<li><a href="/img1" title="查看相册内容"><img src="<li><a href="/img1" title="查看相册内容"><img src="<li><a href="/img1" title="查看相册内容"><img src="</div>
</li>
<li class="tabOption"><h4><a href="/share/" title="单击，跳转到所有[分享]列表"><span>分享</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent share">
<li><a href="/img2" title="查看内容"><img src="<li><a href="/img2" title="查看内容"><img src="<li><a href="/img2" title="查看内容"><img src="<li><a href="/img2" title="查看内容"><img src="</ul>
</div>
</li>
<li class="tabOption"><h4><a href="/group/" title="单击，跳转到所有[群组]列表"><span>群组</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent group">
<dt><a href="/1" title="标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt>
<dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/2" title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
<dd class="name"><a href="#11" title="群组：手绘爱好者">手绘爱好者</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/3" title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>
<dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/4" title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>
<dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/5" title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt>
<dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>

点此进一步了解“较好的视觉效果的网页选项卡”相关的更多内容
转载请注明［学网］：http://www.xue5.com 
  • 上一篇文章：
    •  
  • 下一篇文章：
    •  

    非主流柔紫色调图片制作教程
    非主流欧美粉色调图片PS教程
    沧桑怀旧非主流风格制作教程
    朦胧感非主流签名图片制作教程

    悲伤非主流图片效果制作教程
    超简单非主流冷艳风格调色教程
    艳丽色调非主流照片制作教程
    超简单非主流视频照片制作教程
    学网·特别声明：
    本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。本站所有文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题，请联系编辑人员Xababy#Gmail.com，我们尽快予以更正。
    【最新JS实例资料】
    ·新浪体育频道文字滚动特效代码
    ·百度有啊商城CSS+XHTML实现的圆角
    ·土豆网首页轮换图片特效代码
    ·仿Taobao首页商品分类列表特效代码
    ·JavaScript实现网页图片等比例缩放效果
    ·JavaScript仿CSDN 右下角的浮动层广告
    ·JS可控制cookies的显弹广告代码
    ·突破winxp sp2/win2003 sp2超强弹窗代码
    【非主流照片制作】

    非主流冷艳张扬风格制作教程
    非主流梦幻绿色调制作教程

    Photoshop调出非主流风格蓝调照片
    非主流柔紫色调图片制作教程

    非主流怀旧暖色调制作教程
    PS制作唯美非主流相框效果教程
    【PhotoShop经典教程】

    Photoshop制作动感书写动画GIF签名
    Photoshop制作人物诡异的PUNK風格

    Photoshop鼠绘清纯可爱的美女半身像
    PhotoShop将真人美女变成机器人MM(实例)

    Photoshop调出人像的暗调金灰色(1)
    设置PhotoShop笔刷 绘制水墨画的柔美韵味
    设为首页 - 收藏学网 - 关于学网 - RSS订阅 - 版权申明 - 友情链接 - 联系学网 - 网站地图 - 投稿学网
    学网·2003-2008版权所有
    © CopyRight 2004-2008 WwW.Xue5.CoM.Inc All Rights Reserved
    合作、联系E-Mail：cainiaoo.cn#live.cn ＱＱ：1103290，329700200

    学网_致力于电脑使用知识、软件操作知识以及互联网应用知识的普及
    陕ICP备05000834号