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

<title>选项卡</title>

<script>

<!--

function setTab(name,cursel,n){

for(i=1;i<=n;i++){

var menu=document.getElementById(name+i);/* two1 */

var con=document.getElementById("con_"+name+"_"+i);/* con_two_1 */

menu.className=i==cursel?"hover":"";/*三目运算  等号优先*/

con.style.display=i==cursel?"block":"none";

}

}

//-->

</script><style type="text/css">.city_ser_show{display:none;width:490px;height:200px;border:1px solid #CCCCCC;}

#con_two_1{display:block;}

#menubox{width:500px;height:24px;margin-bottom:7px;}

#menubox ul{margin:0;padding:0;}

#menubox ul li{float:left;list-style:none;display:inline;padding-top:7px;border:1px solid #D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text-</p><p>overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}

#menubox ul li.hover{border-top:2px solid #D1D1D1;border-right:2px solid #D1D1D1;border-left:2px solid #D1D1D1;color: #000000;font-weight:bold;border-bottom:0px solid #D1D1D1;}</style></head><body>

<div id="main">

<div id="menubox">

<!--样式1  滑动选项卡-->

<!--

<ul>

<li id="two1" onmousemove="setTab('two',1,6)" class="hover">选项卡1</li>

<li id="two2" onmousemove="setTab('two',2,6)">选项卡2</li>

<li id="two3" onmousemove="setTab('two',3,6)">选项卡3</li>

<li id="two4" onmousemove="setTab('two',4,6)">选项卡4</li>

<li id="two5" onmousemove="setTab('two',5,6)">选项卡5</li>

<li id="two6" onmousemove="setTab('two',6,6)">选项卡6</li>

</ul>

-->

<!--样式2 -->

<ul>

<li id="two1" onclick="setTab('two',1,6)" class="hover"><a>选项卡1</a></li>

<li id="two2" onclick="setTab('two',2,6)"><a>选项卡2</a></li>

<li id="two3" onclick="setTab('two',3,6)"><a>选项卡3</a></li>

<li id="two4" onclick="setTab('two',4,6)"><a>选项卡4</a></li>

<li id="two5" onclick="setTab('two',5,6)"><a>选项卡5</a></li>

<li id="two6" onclick="setTab('two',6,6)"><a>选项卡6</a></li>

</ul></div>

<div id="conten">

<div class="city_ser_show" id="con_two_1">

选项卡1

<p>选项卡1的值</p>

</div>

<div class="city_ser_show" id="con_two_2">

选项卡2

<p>选项卡2的值</p>

</div>

<div class="city_ser_show" id="con_two_3">

选项卡3

<p>选项卡3的值</p>

</div>

<div class="city_ser_show" id="con_two_4">

选项卡4

<p>选项卡4的值</p>

</div>

<div class="city_ser_show" id="con_two_5">

选项卡5

<p>选项卡5的值!</p>

</div>

<div class="city_ser_show" id="con_two_6">

选项卡6

<p>选项卡6的值!</p>

</div></div>

</div>

</body>

</html>

CSS选项卡的更多相关文章

  1. 利用radio实现纯css选项卡切换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEX

  2. 纯CSS选项卡

    html: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  3. 使用jQuery+css实现选项卡切换功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  5. Js脚本实现选项卡的实例

    效果演示: 具体代码: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http:/ ...

  6. 前端页面重构技巧总结TIP【持续更新...】

    本文均为项目实战经验,要求兼容至IE8,所以以下内容均为兼容代码,欢迎各位小伙伴批评指教.其实重构页面是一门学问,看似简单,却暗藏很多学问.实际项目中页面的重构有以下几点最基本需求: 1.需要使用合理 ...

  7. Vue.js 相关知识（基础）

    1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...

  8. IE开发人员工具教程

    写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载 ...

  9. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

随机推荐

  1. TMemoryStream、String与OleVariant互转

    //////////////////////////////////////////////////////////////////////////////////功能: STRING 的内容流化到 ...

  2. H2内存数据库 支持存储到文件

     准备工作 1.下载JDK(本人下载的版本号为JDK1.7).环境变量设置JAVA_HOME.设置PATH(%JAVA_HOME%\bin%). 2.下载并解压:h2-2014-07-13.zip ...

  3. 【Demo 0001】Java基础-数据类型

    本章学习要点:       1.  了解Java 语言       2.  了解Java程序结构;        3.  了解Java中基本数据类型;       4.  掌握基本数据类型之间的运算 ...

  4. HttpSession具体解释

    session的机制 http是无状态的协议,客户每次读取web页面时,server都打开新的会话,并且server也不会自己主动维护客户的上下文信息,那么要怎么才干实现会话跟踪呢?session就是 ...

  5. 与众不同 windows phone (21) - Device（设备）之摄像头（拍摄照片, 录制视频）

    原文:与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频) [索引页][源码下载] 与众不同 windows phone (21) - Device ...

  6. java反射机制 + Method.invoke解释 getMethod + 反射理解

    功能: 通过读取另一个Dll去创建一个控件(Form,Button,TextBox,DataGridView),然后对当中一些属性进行检查. 创建控件的大致流程是,Assembly->Modul ...

  7. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  8. [Android学习笔记]view的layout过程学习

    View从创建到显示到屏幕需要经历几个过程: measure -> layout -> draw measure过程:计算view所占屏幕大小layout过程:设置view在屏幕的位置dr ...

  9. nginx 区分pc和mobile 到不同的404页面

    if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry|vivo)') { set $mobile_request '1'; } ...

  10. POJ 3415 Max Sum of Max-K-sub-sequence （线段树+dp思想）

    Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...