<!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. 14.2.1 MySQL and the ACID Model

    14.2 InnoDB Concepts and Architecture InnoDB 概念和结构体系: 14.2.1 MySQL and the ACID Model 14.2.2 InnoDB ...

  2. Flume 1.5日志收集和存款mongodb安装结构

    Flume该演示是不是说.你可以自己搜索. 但现在的互联网主要是Flume 1.4前版本号的信息.Flume 1.5在轰动的大变化.假设你准备尝试,我在这里给大家介绍一下程序最小化结构,和使用Mong ...

  3. Linux下Qt4与qt5的程序使用输入法（ibus与fcitx）不冲突

    这篇文章引用了较多其他作者的内容,也忘记引用的出处了,只能感谢了.以下转入正题. 对于qt5.5,要下载libqt库源码自己编译,参考解决Qt5 Creator无法切换输入法(fcitx),Ubunt ...

  4. 监控apache虚拟主机进程

    mod_status模块能输出例如以下内容: 正在伺服请求的工作者(线程或进程)数量 空暇的工作者数量 每一个工作者的状态:已完毕的请求数.已发送的字节数.(*) 总訪问数和已发送的字节总数(*) s ...

  5. “聊天剽窃手”--ptrace进程注入型病毒

    近日,百度安全实验室发现了一款"聊天剽窃手"病毒.该病毒可以通过ptrace方式注入恶意代码至QQ.微信程序进程.恶意代码可以实时监控手机QQ.微信的聊天内容及联系人信息. 该病毒 ...

  6. 网站教学 提纲总结到ajax结束后面还有

    Repeater - 重复器五个模板:HeaderTemplate - 在最上面,显示一次FooterTemplate - 最下面,显示一次ItemTemplate - 在中间,显示n次Alterna ...

  7. c#soap调用WebService

    辅助类 /// <summary> /// 上传数据参数 /// </summary> public class UploadEventArgs : EventArgs { i ...

  8. 如何隐藏 QLPreviewController 的 Action 按钮？

    在 iOS 6 以前,可以在 present QLPreviewController 之后使用以下代码: [previewController.navigationItem setRightBarBu ...

  9. uva--562Dividing coins +dp

    题意: 给定一堆硬币,然后将他们分成两部分,使得两部分的差值最小;输出这个最小的差值. 思路: 想了好久都没想到一个合适的状态转移方程.后面看了别人的题解后,才知道能够转成背包问题求解. 我们将全部的 ...

  10. [Android学习笔记]Activity

    每一个activity都表示一个屏幕,程序把activity呈现给用户,而在activity上实际看到的UI控件,都是View. 故把activity简单理解为view的容器. activity的状态 ...