<!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. java 中通过label跳出双重for 循环

    java 中如何跳出双重for 循环 java跳出循环是使用break语句的,break默认跳出当前循环(包括for循环.while循环),当使用双层循环时,可通过label从内层循环跳出.有关对比的 ...

  2. C语言深度解剖读书笔记(6.函数的核心)

    对于本节的函数内容其实就没什么难点了,但是对于函数这节又涉及到了顺序点的问题,我觉得可以还是忽略吧. 本节知识点: 1.函数中的顺序点:f(k,k++);  这样的问题大多跟编译器有关,不要去刻意追求 ...

  3. 【ASP.NET Web API教程】3.4 HttpClient消息处理器

    原文:[ASP.NET Web API教程]3.4 HttpClient消息处理器 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 3.4 ...

  4. C++开源代码项目汇总

    Google的C++开源代码项目 v8  -  V8 JavaScript EngineV8 是 Google 的开源 JavaScript 引擎.V8 采用 C++ 编写,可在谷歌浏览器(来自 Go ...

  5. ASP.NET 2.0 页(Page)生命周期概述

    原文:ASP.NET 2.0 页(Page)生命周期概述 引用MSDNASP.NET 页生命周期概述 ASP.NET 页运行时,此页将经历一个生命周期,在生命周期中将执行一系列处理步骤.这些步骤包括初 ...

  6. GotGitHub — GotGitHub

    GotGitHub - GotGitHub GotGitHub

  7. JAVA编程心得-JAVA实现CRC-CCITT(XMODEM)算法

    CRC即循环冗余校验码(Cyclic Redundancy Check):是数据通信领域中最常用的一种差错校验码,其特征是信息字段和校验字段的长度可以任意选定. 1 byte checksum CRC ...

  8. NET平台机器学习组件-Infer.NET

    NET平台机器学习组件-Infer.NET(三) Learner API—数据映射与序列化 阅读目录 关于本文档的说明 1.基本介绍 2.标准数据格式的映射 3.本地数据格式映射 4.评估数据格式映射 ...

  9. Java程序员们最常犯的10个错误(转)

    1.将数组转化为列表 将数组转化为一个列表时,程序员们经常这样做: 1 List<String> list = Arrays.asList(arr); Arrays.asList(&quo ...

  10. Python -- 堆数据结构 heapq - I love this game! - 博客频道 - CSDN.NET

    Python -- 堆数据结构 heapq - I love this game! - 博客频道 - CSDN.NET Python -- 堆数据结构 heapq 分类: Python 2012-09 ...