效果如下图所示：

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. mongodb因非法关闭导致无法启动的解决方案

    mongodb因非法关闭导致无法启动的解决方案 1.删除数据库目录的.lock文件 2.输入命令 mongod --repair 3.重启

  2. 一：My Batis快速入门

    ---恢复内容开始--- 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检 ...

  3. day 69crm(6) stark组件 action 和 多层过滤效果

      前情提要: 今天学的是stark 组件的 action  和多层过效果 一: action (自定制函数多选功能效果) 1: 学习 观点明确:     2: 多选效果前端和后端进行的操作   2& ...

  4. Vim实用技巧系列 - 搜索

    最近发现了一个很好的VIM资源,best of vim tips, 展示了一系列很有用的vim 技巧.博主会逐个翻译介绍这些技巧. 来源: http://rayninfo.co.uk/vimtips. ...

  5. HashMap、HashSet、LinkedHashSet、TreeSet的关系

    类图及说明如下:

  6. (转)十分钟了结MySQL information_schema

    十分钟了结MySQL information_schema  原文:http://www.cnblogs.com/shengdimaya/p/6920677.html information_sche ...

  7. 【数组】Spiral Matrix

    题目: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spira ...

  8. PL/SQL developer 出现无效的SQL语句的解决

    这里要说的SQL语句本身没有错误,但是PL/SQL developer 出现无效的SQL语句的解决. 出现这个提示是因为下面的这句代码: --变量num:是一个地址值,在该地址上保存了输入的值 acc ...

  9. 【原】Ubuntu13.04安装、卸载Gnome3.8

    添加 GNOME 3 PPA(Personal Package Archives) 我们先给Ubuntu的Software Sources增加GNOME 3 PPA.这可以不用命令行就做到,但出于简单 ...

  10. Linux -- 使用笔记

    Linux新增分辨率1920x1080 sudo gedit /etc/default/grub 找到:#GRUB_GFXMODE=640x480 在这行下面加一行GRUB_GFXMODE=1920x ...