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

<title>TAB样式</title>

</head>

<style type="text/css">

  #head{width:400px;

        height:30px;}

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

  #head ul li{ list-style:none; float:left; text-decoration:none; display:block;

               width:80px;padding:5px; margin:0px 10px 0px 0px; position:relative;}

  #head ul li a{ text-decoration:none; color:#000000;}

  #head ul li a:visited{ text-decoration:none; color:#000000;}

 #L1{

 background-color:#9CC;

 border-top-color: #F6C;

 border-right-color: #F6C;

 border-left-color: #F6C;

  }

  #L2{

   background-color:#CC9;

   border-color:#309;

   margin-left:1px;

  }

 #L3{

   background-color:#FF3;

   border-color:#360;

  }

 #L4{

   background-color:#690;

   border-color:#360;

  } 

#d1{

 background-color:#9CC;

 border:1px solid #C39;

 width:400px;

  height:220px;

  margin-top:0px;

  position:absolute;

  z-index:1;

 }

#d2{

 background-color:#CC9;

 border:1px solid #309;

    display:none;

    width:400px;

    height:220px;

    margin-top:0px;

    position:absolute;

    z-index:1;

 }

#d3{

 background-color:#FF3;

 border:1px solid #360;

 display:none;

 width:400px;

  height:220px;

  margin-top:0px;

  position:absolute;

  z-index:1;

 }

#d4{

 background-color:#690;

 border:1px solid #360;

 display:none;

  width:400px;

  position:absolute;

  height:220px;

  margin-top:0px;

  z-index:1;

 }

</style>

<script language="javascript">

function Tab(num)

{

    var i;

    for(i=1;i<=4;i++)

    {

        if(i==num)

           document.getElementById("d"+i).style.display="block";

         else

           document.getElementById("d"+i).style.display="none";

    }

}

</script>

<body>

<div id="head">

<ul>

 <li id="L1" onclick="Tab(1)"><a href="#">公告信息</a></li>

 <li id="L2" onclick="Tab(2)"><a href="#">今日热点</a></li>

 <li id="L3" onclick="Tab(3)"><a href="#">最新新闻</a></li>

 <li id="L4" onclick="Tab(4)"><a href="#">考试信息</a></li>

</ul>

</div>

<div id="d1">

<ul>

  <li>这里是最新公告信息</li>

  <li>这里是最新公告信息</li>

  <li>这里是最新公告信息</li>

  <li>这里是最新公告信息</li>

</ul>

</div>

<div id="d2">

<ul>

  <li>这里是今日热点</li>

  <li>这里是今日热点</li>

  <li>这里是今日热点</li>

  <li>这里是今日热点</li>

</ul>

</div>

<div id="d3">

<ul>

  <li>这里是最新新闻</li>

  <li>这里是最新新闻</li>

  <li>这里是最新新闻</li>

  <li>这里是最新新闻</li>

</ul>

</div>

<div id="d4">

<ul>

  <li>这里是考试信息</li>

  <li>这里是考试信息</li>

  <li>这里是考试信息</li>

  <li>这里是考试信息</li>

</ul>

</div>

</body>

</html>

html+css实现选项卡功能的更多相关文章

  1. JS+CSS实现选项卡功能

    [小小一记] 首先我们写一个选项卡的结构出来,包括tab和content: 首先是tab: <ul class="ttitle-box-tabs" id="tabs ...

  2. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  3. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  4. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  5. css Tab选项卡

    css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...

  6. css Tab选项卡1

    利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a   ...

  7. Android中选项卡功能的实现

    Android中选项卡功能的实现 Android中使用TabHost和TabWidget来实现选项卡功能.TabHost必须是布局的根节点,它包含两个子节点: TabWidget,显示选项卡: Fra ...

  8. js进阶 11-21 纯css实现选项卡

    js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...

  9. 原生Js_实现简单选项卡功能

    javascript实现选项卡功能,在<script>...</script>中编写代码 实现步骤 a)获得各操作的dom对象: b)在所有按钮对象上添加单击事件: c)设置所 ...

随机推荐

  1. (转)Linux内核 TCP/IP、Socket参数调优

    Doc1: /proc/sys/net目录 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的,任何修改在系统重启后都会丢失) ...

  2. 洛谷 P3133 [USACO16JAN]无线电联系Radio Contact

    P3133 [USACO16JAN]无线电联系Radio Contact 题目描述 Farmer John has lost his favorite cow bell, and Bessie the ...

  3. Apache Tez on hive

    ———————————————————— 调配 Hadoop  ———————————————————— 1 将 编译好的 TEZ .tar.gz 文件上传到 HDFS 中.   hdfs fs -p ...

  4. Android在程序中浏览网页

    本文是自己学习所做笔记,欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 有时须要在程序中浏览一些网页.当然了能够通过调用系统的浏览器来打开浏览.可是大多 ...

  5. C++11新特性应用--介绍几个新增的便利算法(用于分区的几个算法)

    今天继续. C++11新增的关于Non-modifying sequence operations和Modifying sequence operations的算法已经写了.具体信息见之前的博客. 以 ...

  6. leveldb学习：sstable(2)

    block写入:block_builder block.h和.cc里定义了block的entry存储格式和restart,提供了entry的查找接口以及迭代器.那么怎样往写block里写entry呢? ...

  7. 上传文件 nginx 413错误

    nginx : 413 Request Entity Too Large 上传文件过程发生413 Request Entity Too Large错误,翻译为请求实体过大,断定为nginx限制了请求体 ...

  8. hibernate之4.延迟载入

    延迟载入: 仅仅有当使用以实体对象的属性(除主键属性外)时,才会发送查询语句到数据库 get不支持延迟载入 @Test public void getTest(){ Session session=n ...

  9. bzoj1022: [SHOI2008]小约翰的游戏John（博弈SG-nim游戏）

    1022: [SHOI2008]小约翰的游戏John 题目:传送门 题目大意: 一道反nim游戏,即给出n堆石子,每次可以取完任意一堆或一堆中的若干个(至少取1),最后一个取的LOSE  题解: 一道 ...

  10. 那些年尝试过的效率工具之Total Commander

    昨天电脑文件很乱,想整理一下发现移动.复制文件要来回目录切换很麻烦,突然就又想起了用Total Commander——简称TC,很久之前尝试过但没坚持使用的工具. 借此机会总结一下自己对TC的认识,后 ...