效果如下图所示：

HTML code:

<!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=utf-8" />

<title>注重语义、结构、用户体验的Tab选项卡</title>

<style>

* {margin:0; padding:0;}

body {background:#FFF; color:#333;}

a {color:#333; text-decoration:none;}

a:hover {text-decoration:underline;}

ul, li {list-style:none;}

.wrap {width:700px; margin:0 auto; line-height:25px; font-size:12px;}

h1 {text-align:center; margin-top:50px;}

#hotnews {position:relative; width:350px; margin: 0 auto; height:150px; margin-top:50px;}

#hotnews h2 {display:block; float:left; width:50px; margin-right:2px; font-size:12px; font-weight:normal; text-align:center; cursor:pointer;}

#hotnews .title_normal {background:#CCC;}

#hotnews .title_current {background:#C2130E; color:#FFF;}

#hotnews ul {position:absolute; left:0px; top:25px; width:300px; padding:8px 0 0 5px; border-top:3px solid #C2130E; font-size:14px

}

.footer {margin-top:50px; border-top:#CCC dashed 1px; text-align:right;}

</style>

</head>

<body>

<div class="wrap">

<h1>注重结构、语义、用户体验的Tab选项卡</h1>

<div id="hotnews">

<h2>新闻</h2>

<ul>

<li><a href="#">[新闻]轿车逆行撞死斑马线上7岁后逃逸</a></li>

<li><a href="#">[新闻]乌鲁木齐警方抓捕疑犯遭暴力</a></li>

<li><a href="#">[新闻]数据表对拷程序Delphi控件版</a></li>

</ul>

<h2>火炬</h2>

<ul>

<li><a href="#">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></li>

<li><a href="#">BMP位图按钮的VC++实现</a></li>

<li><a href="#">[火炬]河南驻马店警方配备宝马警车</a></li>

</ul>

<h2>图片</h2>

<ul>

<li><a href="#">BMP位图按钮的VC++实现</a></li>

<li><a href="#">[图片]网友创作歌曲"人民心疼你"总理敬意</a></li>

<li><a href="#">计算机机房管理系统Delphi源代码</a></li>

</ul>

<h2>锐点</h2>

<ul>

<li><a href="#">计算机机房管理系统Delphi源代码</a></li>

<li><a href="#">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li>

<li><a href="#">BMP位图按钮的VC++实现</a></li>

</ul>

</div>

<div class="footer">Power By <a href="/">zz5u</a><br/>

2010.04</div>

</div>

<script>

function $(id){return document.getElementById(id);}

function $tag(id,tagName){return $(id).getElementsByTagName(tagName)}

var onum=0;//用于控制默认打开的标签

var Ds=$tag("hotnews","ul");

var Ts=$tag("hotnews","h2");

for(var i=0; i<Ds.length;i++){

if(i==onum){

Ds[i].style.display="block";

Ts[i].className = "title_current";

}

else{

Ds[i].style.display="none";

Ts[i].className = "title_normal";

}

Ts[i].value=i;

Ts[i].onmouseover=function(){

if(onum==this.value){return false;};

Ts[onum].className="title_normal";

Ts[this.value].className="title_current";

Ds[onum].style.display="none";

Ds[this.value].style.display="block";

onum=this.value;

}

}

</script>

</body>

</html>

注重结构、语义、用户体验的Tab选项卡的更多相关文章

  1. BAT三家互联网公司哪家更注重用户体验？

    这几天百度的用户体验又成了设计圈关注的对象,李彦宏好不容易刷出来的好感度一下子被打入了冰点,通过此次事件,不难看出现在的互联网用户对于产品的体验要求越来越高,作为一名美图秀秀级别选手,很难领悟“好设计 ...

  2. HTML结构 语义化思想

    总体思想:用正确的标签做正确的事情! 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 主要体现: 1. 对用户而言, ...

  3. Web开发中设置快捷键来增强用户体验

    从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所 ...

  4. iOS用户体验之－导航之道

    iOS用户体验之-导航之道 用户不会意识到有导航指向的存在除非他遇到非预期的效果. 能够说导航时逻辑跳转的节点.所以导航对用户体验是至关重要的. iOS中有三种类型的导航.每一种适合不同类型的app. ...

  5. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  6. Web优化躬行记（4）——用户体验和工具

    一.用户体验 用户体验(UE/UX)是指一个人使用一个特定产品.系统或服务时的行为.情绪与态度,还包含用户对于系统的功能.易用和效率的感受,因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想 ...

  7. CSS3新特性应用之用户体验

    一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...

  8. Apple、Google、Microsoft的用户体验设计原则

    轻巧的Apple 注重设计过程: 在设计过程中引入用户交互的5个目标: 了解您的目标客户 分析用户的工作流 构造原型系统 观察用户测试 制定观察用户准则 做出设计决定 避免功能泛滥 80% 方案 优秀 ...

  9. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 基于Zookeeper实现的分布式互斥锁 - InterProcessMutex

    Curator是ZooKeeper的一个客户端框架,其中封装了分布式互斥锁的实现,最为常用的是InterProcessMutex,本文将对其进行代码剖析 简介 InterProcessMutex基于Z ...

  2. day 54 linux 常用指令入门

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  3. VmWare扩展硬盘分区

    扩展硬盘 对硬盘进行分区 () 查看现有的硬盘分区情况 [mysql@china ~]$ df -h Filesystem Size Used Avail Use% Mounted on /dev/m ...

  4. 如何让IE 低版本下支持 css3属性

    依赖源  该文件为  ie-css3.htc    (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上 ...

  5. 【xsy1143】 兔子的数字 搜索

    题目大意:请找到第$k$大的数,满足各位数字之和等于各位数字之积.其中$k≤10^{18}$. 首先我们要确定这个第$k$大的数有多大 我们用$f[i][j][he][ji]$表示我们要搜索一个$i$ ...

  6. Redis数据类型之SDS简单动态字符串

    一,简单的动态字符串 1,Redis自己构建了一种名为简单动态字符串的抽象类型,并将SDS用作Redis的默认字符串表示, 2,在redis的数据库里面,包含字符串值的键值对在底层都是由SDS实现的 ...

  7. Linux 线程占用CPU过高定位分析

    今天朋友问我一个Linux程序CPU占用涨停了,该如何分析, CPU占用过高,模拟CPU占用过高的情况 先上一段代码: #include <iostream> #include <t ...

  8. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

  9. java 中几种常用数据结构

    Java中有几种常用的数据结构,主要分为Collection和map两个主要接口(接口只提供方法,并不提供实现),而程序中最终使用的数据结构是继承自这些接口的数据结构类. 一.几个常用类的区别 1．A ...

  10. IE中的userData

    之前做项目时用到了localstorage,但是考虑到浏览器存在IE8以下不兼容问题,所以来介绍以下IE中的userData. 本地存储解决方案很多,比如Flash SharedObject.Goog ...