效果如下图所示：

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. 二：MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作

    上一篇博文MyBatis学习总结(一)——MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对u ...

  2. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  3. (转)python函数： 内置函数

    原文:https://blog.csdn.net/pipisorry/article/details/44755423 https://juejin.im/post/5ae3ee096fb9a07aa ...

  4. 前端必备：FastStoneCapture 和 Licecap &&& mingw c++ 编译执行

    端必备:FastStoneCapture 和 Licecap FastStoneCapture这个软件非常小,只有2M多,并且其功能很强大,包括截图,录制视频,量尺,取色等等,对于前端工程师绝对是必备 ...

  5. EJB3 事物

    在ejb3中事物分为两种类型:容器管理的事物(CMT).Bean管理的事物(BMT) 1.容器管理的事物(CTN) 是EJB默认的事物管理方式,即以对应的方法起始和结束来由EJB容器确定事务的始末边界 ...

  6. js前端日期格式化处理

    js前端日期格式化处理 1.项目中时间返回值,很过时候为毫秒值,我们需要转换成 能够看懂的时间的格式: 例如: ​ yyyy-MM-dd HH:mm:ss 2.处理方法(处理方法有多种,可以传值到前端 ...

  7. 【优化】如何检测移动端 CPU 以及内存占用率

    原文  http://taobaofed.org/blog/2015/12/04/cpu-allocation-profiler/ 前言 6 月底的时候淘宝众筹的 H5 接入到了支付宝钱包,上线前支付 ...

  8. python上安装requests

    首先需要配置好python的环境变量. 测试是否成功配置,进入命令行,输入python. 如下图为配置成功. 去第三方库的网站下载安装包,解压在python的安装目录 ,下载地址:https://py ...

  9. Android 开发工具类 15_ MyAsyncTask

    AsyncTask 对于生命周期较短且需要在UI上显示进度和结果的后台操作是很好的解决方案.然而,当 Activity 重新启动时,这种操作将不会持续进行,也就是说,AsyncTask 在设备的方向变 ...

  10. Android 开发工具类 01_AppUtils

    1.获取应用程序名称: 2.获取应用程序版本信息. import android.content.Context; import android.content.pm.PackageInfo; imp ...