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

原创 2007年09月29日 09:46:00

      时下网上非常流行那种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就搞定,这是不是能为你的页面节省不少空间呢:)

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

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

 

2016全球最强数据库大盘点

摘要: 本文盘点2016年数据库市场各个数据库市场、技术特点等 【数据库排名年度盘点】 说到盘点,首先肯定得看看DB-Engines的全球数据库排名。下表是2017年1月份前20名数据...
  • waferleo
  • waferleo
  • 2017年01月10日 18:29
  • 5679

当前比较流行的前端框架整理

扯淡(可以直接略过): 时间飞逝,从事前端开发工作转眼已快两年,对于前端的知识,两年中却很少整理,偶然一同事问起前端框架,这才想起,其实应该好好整理下前端的基本知识点,许久之后,自己也能回过来也能复...
  • u013184759
  • u013184759
  • 2016年11月25日 00:19
  • 6844

时下流行的浏览器user_Agent

一、基础知识篇: HttpHeader之User-Agent UserAgent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,UserAgent也简称UA。它是一个特殊字符串头,...
  • Hubz131
  • Hubz131
  • 2017年10月30日 12:49
  • 395

加密技术及流行加密算法

深入浅出谈加密加密技术已经渗透进了整个信息时代,任何人都不可避免地要接触到——即使你根本不知道“加密”是什么。银行卡、登录计算机的口令、电子邮件的账号密码……无一例外地跟加密技术紧紧联系在一起。任何一...
  • sniperit8
  • sniperit8
  • 2008年02月28日 11:45
  • 1181

VB之TabStrip控件使用举例

先创建若干个TabStrip的选项然后创建一个Frame控件数组,个数与TabStrip选项卡个数相等注意设置Frame控件数组的索引值(index属性)从1开始(默认为从0开始),以便和TabStr...
  • qq37724861
  • qq37724861
  • 2016年06月16日 15:38
  • 1755

时下流行高清音频格式详解

思路探析:时下流行高清音频格式详解 2009-04-07 10:29:29  来源:思路网  浏览次数:4546Dolby:1.杜比数字技术(Dolby Digital)  杜比数字是一种非常成熟的,...
  • gerryzhu
  • gerryzhu
  • 2009年07月07日 18:40
  • 725

10个主流算法简介

什么是算法? 简而言之,任何定义明确的计算步骤都可称为算法,接受一个或一组值为输入,输出一个或一组值。(来源:homas H. Cormen, Chales E. Leiserson 《算法导论第3...
  • ALDRIDGE1
  • ALDRIDGE1
  • 2014年06月04日 15:39
  • 848

流行Web框架对比分析

 下班前,给Jameson, Mike, Jarod一起做了一个关于Webwork+FreeMarker框架的简单培训。通过给他们讲这些不同的技术框架,也让我有了心思将一些流行的框架进行以下分析和对比...
  • smilingleo
  • smilingleo
  • 2006年12月12日 18:08
  • 6891

互联网目前比较流行的一些开源程序分别适合打造哪种类型的网站

截止到目前,我接触过和比较熟悉的互联网主流开源建站程序有wordpress程序,这个程序是我最早接触的一款开源程序,当初我在学习建站的时候对开源程序还不是很了解,那时候的想法很简单,就是希望通过自己的...
  • u013958046
  • u013958046
  • 2014年03月24日 12:15
  • 783

tabstrip和multipage使用心得

手头有一个项目,其中一个页面需要分别用树和表的形式来显示会员信息,在网上搜索了一下,找到了一个控件包,其中有一个  tabstrip 和 multipage,这两个控件相结合就能达到 多页框功能,下面...
  • xcplates
  • xcplates
  • 2006年12月26日 10:43
  • 1963
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单写了个时下比较流行的tabStrip
举报原因:
原因补充:

(最多只允许输入30个字)