效果如下图所示：

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. Android启动过程介绍

    开机过程大致可以分为以下三个阶段 OS级别 由bootloader载入linux kernel后,kernel开始初始化, 并载入built-in的驱动程序.Kernel完成开机后,载入init pr ...

  2. day 49 数据分析, 数据聚合 F 查询 Q 查询

    6.聚合查询和分组查询 1.聚合查询aggregate 我们先通过一个例子来感受一下吧. 1 2 3 # 计算所有图书的平均价格 books = models.Book.objects.aggrega ...

  3. Ubuntu16.04 / OpenCV / Python 源码安装

    为什么需要源码安装? 1. 对 Python 版的 OpenCV,Ubuntu 有两种安装方式: 源码安装:官网(https://opencv.org/releases.html)下载源代码,在机器上 ...

  4. 使用Properties类和ResourceBundle类读取properties文件

    一.介绍: 项目中经常把一些常用的用户名和密码都填写到一个对应的配置文件中,这样每次修改密码或者用户名的时候就可以直接修改这个配置文件了,不用动源码. 这里讲两种方式读取properties文件的方法 ...

  5. Spring Security构建Rest服务-1201-Spring Security OAuth开发APP认证框架之实现服务提供商

    实现服务提供商,就是要实现认证服务器.资源服务器. 现在做的都是app的东西,所以在app项目写代码  认证服务器: 新建 ImoocAuthenticationServerConfig 类,@Ena ...

  6. php 页面 不显示任何错误提示

    error_reporting(0); ini_set('html_errors',false); ini_set('display_errors',false);

  7. Android_字符串转换

    这个很简单,只是一个输入框,一个按钮,一个TextView用来显示转换后的字符串,按钮有一个事件,使用可视化操作界面下添加的,毕竟很方便嘛!

  8. Android 开发工具类 22_PullPersonService

    PULL 解析 XML import java.io.InputStream; import java.io.OutputStream; import java.util.ArrayList; imp ...

  9. Android 开发工具类 12_PullXmlTools

    xml 格式数据 <?xml version="1.0" encoding="UTF-8"?> <user-list> <user ...

  10. Http编程（二）使用Apache 的API实现

    要下载jar包 import java.io.FileOutputStream; import java.io.IOException; import org.apache.http.HttpEnti ...