<!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. NYOJ 1085 数单词 （AC自己主动机模板题）

    数单词 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 为了可以顺利通过英语四六级考试,如今大家每天早上都会早起读英语. LYH本来以为自己在6月份的考试中能够通过六 ...

  2. PowerShell与Unix Shell对比：八大实例

    PowerShell与Unix Shell对比:八大实例 本文将从八个实例对比PowerShell和Unix Shell,通常是Linux Bourne Shell(包括sh.ksh和bash等).二 ...

  3. windows下eclipse跑junit报错：CreateProcess error=206

    from:http://isuifengfei.iteye.com/blog/1684262 windows下,eclipse中运行junit出现错误提示: Exception occurred ex ...

  4. Windows XP环境下 搭建Android NDK环境

    搭建Android NDK环境 Windows XP环境下 1 一些下载 ① NDK r7:http://developer.android.com/sdk/ndk/index.html ② cygw ...

  5. 详谈隐藏Tabbar的几种方法

    如今正在写的一个项目,涉及到了使用两个TabBar,然后我须要显示当中一个的时候,然后隐藏另外一个,可是中间却出现故障了.我查了一些资料,想总结一下关于TabBar的隐藏. 第一种方法是: //隐藏t ...

  6. VMware vSphere服务器虚拟化实验十五 vCenter vShield Manager

    VMware vSphere服务器虚拟化实验十五 vCenter vShield Manager VMware  vShield Manager是专为 VMware vCenter Server 集成 ...

  7. WOJ 1020

    #include<stdio.h> #include<stdlib.h> int main() { int n,m; int *num,*link; int i,j,t,k=0 ...

  8. Zigbee开发(1)

    只是研究zigbee的技术,也许后续的博客不会有很及时的更新,有时间 写一点东西能让大家有所收获吧. 环境搭建 Windows 64位的操作系统 IAR7.6 for 8051 ZStack CC25 ...

  9. 知识网之C++总结

    米老师常说的一句话:构造知识网. 立即要考试了.就让我们构造一下属于C++的知识网.首先从总体上了解C++: 从图中能够了解到,主要有五部分.而当我们和之前的知识联系的话,也就剩下模板和运算符重载以及 ...

  10. 在C#中子线程如何操作主窗口线程上的控件

    在C#中子线程怎样操作主线程中窗口上控件 在C#中,直接在子线程中对窗口上的控件操作是会出现异常,这是因为子线程和运行窗口的线程是不同的空间,因此想要在子线程来操作窗口上的控件.是不可能简单的通过控件 ...