<!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. shell 键盘录入和运算

    一.read 命令,从键盘读入数据,赋给变量 1.脚本代码 #!/bin/sh read arg1 arg2 echo "第一个参数: $arg1" echo "第二个参 ...

  2. UVA 1329 Corporative Network【并查集】

    题目链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...

  3. JAVA设计模式之【观察者模式】

    观察者模式 交通信号灯是汽车的观察目标,汽车是观察者 一个对象的状态或行为的变化将导致其他对象的状态或行为也发生变化 为了描述这种一对多或一对一的联动,观察者模式应运而生 在观察者模式中,发生改变的对 ...

  4. nyoj--27--水池数目（dfs）

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上 ...

  5. linux centos下载地址

    Centos下载地址 http://r.aminglinux.com

  6. Spark 运行机制及原理分析

  7. Wordcount 和 shuffle的流程

  8. 转js resplace方法使用

    作者: hezhiwu5#163.com    时间:2007-3-22 大家好!!今晚在华软G43*宿舍没什么事做,把javascript中replace方法讲解一下,如果讲得不对或不合理是情理之中 ...

  9. 洛谷 P1967 货车运输 LCA + 最小生成树

    两点之间边权最大值的最小值一定在图的最小生成树中取到. 求出最小生成树,进行倍增即可. Code: #include<cstdio> #include<algorithm> u ...

  10. 搭建javawebxiangmu

    https://blog.csdn.net/qq_23994787/article/details/73612870#