<!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. 【Demo 0003】Android 事件

    本章学习要点:        1.  了解Android中资源用途:        2.  掌握资源使用通用规则:        3.  掌握具体资源使用方法;

  2. display:table 水平居中

    <div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...

  3. sql语句查询添加自增列

    SELECT Row_Number() over ( order by getdate() ) as '序号', * FROM  T_Cod_XQ

  4. MVC3和MVC4中CRUD操作

    MVC3中EF实现的CRUD操作 public class HomeController : Controller { // // GET: /Home/ CarModelContainer db = ...

  5. mysql5.6 主从配置

    参考网址:http://www.cnblogs.com/zhoujie/p/mysql1.html http://kerry.blog.51cto.com/172631/277414/ 1.配置主库: ...

  6. Delphi XE7 用indy开发微信公众平台所有功能（10篇博客）

    http://www.cnblogs.com/devinlee/p/4282498.html http://www.cnblogs.com/devinlee/p/4565933.html

  7. Lucene.Net 2.3.1开发介绍 —— 三、索引（三）

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(三) 3.Field配置所产生的效果 索引数据,简单的代码,只要两个方法就搞定了,而在索引过程中用到的一些类里最简单,作用也不小的就是F ...

  8. MIPS平台目标机安装Oprofile时出现error

    在Debian下安装Oprofile 重要:应该使linux内核选项支持 在 .config 文件中设置CONFIG_PROFILING=y和CONFIG_OPROFILE=y. 重新编译,烧写.使用 ...

  9. [Android]Button按下后修改背景图

    Button按下后修改背景图 错误做法:为Button添加OnTouch事件监听,根据ACTION_UP和ACTION_DOWN动作来修改Button的背景图 错误原因:从理论上讲,按钮按下修改背景色 ...

  10. js编码、解码

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...