关闭

简单写了个时下比较流行的tabStrip

399人阅读 评论(0) 收藏 举报

      时下网上非常流行那种tabStrip的效果,只要不滥用,确实可以为网站增色不少。

      就我个人来讲,也觉得这是一个非常好的技术:
      ①让页面更美观,结构更紧凑;
      ②效果更吸引人;
      ③最重要的就是节省了很多“地方”。

      以前一个内容比较多的页面,拉了半天滚动条也拉不到底,想找个自己感兴趣的东东似乎也得花些时间。而使用了tabStrip的页面,就可以为你省下拉滚动条的时间去找自己感兴趣的内容。

      趁下午有点空闲时间,就写了个简单的tabStrip例子:

      [演示地址:http://www.doyoe.com/model/tabstrip/tabstrip1/1.htm

CSS部分:

html,body {
 font:12px Verdana,Arial;
 margin:50px;
}
a {
 text-decoration:none;
}
.dymenu {
 width:350px;
 overflow:hidden;
 border-bottom:3px solid #6f6f6f;
 line-height:22px;
}
.dymenu h3 {
 margin:0 35px 0 5px;
 font-size:12px;
 color:#f87106;
 float:left;
}
.dymenu a {
 height:22px;
 padding:0 10px;
 margin-left:1px;
 background-color:#dcdcdc;
 color:#363636;
 float:left;
}
.dylist {
 width:348px;
 border:1px solid #ddd;
 margin:5px 0 0 0;
 padding:5px 0;
 list-style:none;
 display:none;
}
.dylist li {
 padding:3px 8px;
}
.dylist li a {
 padding-left:10px;
 color:#363636;
 background:url(point_01.gif) 0 5px no-repeat;
}
.dylist li a:hover {
 color:#517c11;
 background-position: 0 -10px;
 border-bottom:1px dashed #517c11;
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY Js &amp; Css tabStrip</title>
</head>
<body>
<div class="dymenu">
 <h3>传说中的tabStrip</h3>
 <a href="#" id="link1" onmouseover="showtitle(this,getElementById('dynra'));">内容一</a>
 <a href="#" id="link2" onmouseover="showtitle(this,getElementById('dynrb'));">内容二</a>
 <a href="#" id="link3" onmouseover="showtitle(this,getElementById('dynrc'));">内容三</a>
</div>
<ul id="dynra" class="dylist">
 <li><a href="#1">传说中的tabStrip实验内容一</a></li>
 <li><a href="#1">文章列表一</a></li>
 <li><a href="#1">文章列表一</a></li>
 <li><a href="#1">文章列表一</a></li>
 <li><a href="#1">文章列表一</a></li>
</ul>
<ul id="dynrb" class="dylist">
 <li><a href="#2">传说中的tabStrip实验内容二</a></li>
 <li><a href="#2">文章列表二</a></li>
 <li><a href="#2">文章列表二</a></li>
 <li><a href="#2">文章列表二</a></li>
 <li><a href="#2">文章列表二</a></li>
</ul>
<ul id="dynrc" class="dylist">
 <li><a href="#3">传说中的tabStrip实验内容三</a></li>
 <li><a href="#3">文章列表三</a></li>
 <li><a href="#3">文章列表三</a></li>
 <li><a href="#3">文章列表三</a></li>
 <li><a href="#3">文章列表三</a></li>
</ul>
</body>
</html>

JS部分:

var currentObja = document.getElementById("link1");
var currentObjb = document.getElementById("dynra");
function showtitle(obja,objb){
 obja.style.backgroundColor = '#6f6f6f';
 obja.style.color = '#fff';
 objb.style.display = "block";
 if(currentObja != null && currentObjb != null && currentObja != obja && currentObjb != objb){
  currentObja.style.backgroundColor = '#dcdcdc';
  currentObja.style.color = '#363636';
  currentObjb.style.display = 'none';
 }
 currentObja = obja;
 currentObjb = objb;
}
showtitle(currentObja,currentObjb);

      从例子中可以看出,换作以前,一般在不用tabStrip的情况下,这些内容所占页面的“地方”会是现在的三倍,而现在只需以前的1/3就搞定,这是不是能为你的页面节省不少空间呢:)

      至于里面的代码就不做解释了,非常简单。只要知道了实现原理,大家自己基本都能搞定。

      上次小古同学问了一下这个东东是如果实现的,那时比较忙,敷衍了一下他!- -今天补上。

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48497次
    • 积分:1002
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接