效果如下图所示：

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. CDN添加流程

    CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...

  2. CAN总线协议 学习笔记

    1.CAN总线网络 CAN总线网络主要挂在CAN_H和CAN_L,各个节点通过这两条线实现信号的串行差分传输,为了避免信号的反射和干扰,还需要在CAN_H和CAN_L之间接上120欧姆的终端电阻,但是 ...

  3. 读/写锁的实现和应用（高并发状态下的map实现）

    程序中涉及到对一些共享资源的读和写操作,且写操作没有读操作那么频繁.在没有写操作的时候,两个线程同时读一个资源没有任何问题,所以应该允许多个线程能在同时读取共享资源.但是如果有一个线程想去写这些共享资 ...

  4. Scala中使用implict 扩展现有类的方法

    Scala中implict的一种用法就是扩展现有类的方法,有点类似于.Net中的扩展方法(MS对扩展方法的介绍:扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改 ...

  5. tensorflow初次接触记录，我用python写的tensorflow第一个模型

    tensorflow初次接触记录,我用python写的tensorflow第一个模型 刚用python写的tensorflow机器学习代码,训练60000张手写文字图片,多层神经网络学习拟合17000 ...

  6. (转)rootvg镜像

    步骤1:查看当前还未加入到其它vg的可用PV  # lspv  hdisk0          00027c6a0507fe17                    rootvg          ...

  7. Css权重解析

    Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...

  8. Javac语法糖之EnumSwitch

    在Switch中可以使用的类型有枚举.字符串类型与整形int类型,下面来具体看这几个类型. 1.switch为枚举类型 枚举类: enum Fruit { APPLE,ORINGE } 调用javac ...

  9. glide 解决 golang.org/x/net 等依赖包无法获取

    知道glide有设置镜像功能,可以把某个依赖包的源地址切换为另一个地址,相当于切换到镜像地址,用于某些依赖包被墙的原因 之前碰到 golang.org/x/net,设置镜像: glide mirror ...

  10. C语言求数组的第二大数

    nt second(int value[],int n) { ]; ]; ; ;i < n;i++) { if(value[i] > first) { second = first; fi ...