<!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. CODEVS——T 1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛

    http://codevs.cn/problem/1269/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Descript ...

  2. Qt之窗体透明

    简述 关于窗体透明,经常遇到,下面我们针对常用的透明效果进行讲解: 全透明(主窗体.子窗体均透明) 主窗体透明(子窗体不透明) 子窗体透明(主窗体不透明) 简述 正常状态 全透明 效果 源码 主窗体透 ...

  3. HDU 4309 Contest 1

    最大流建图.开始以为旧桥有1000座,没敢用枚举,后来看看题目发现了只是十二座.枚举桥的状态没问题. 对于隧道的容量W,可以虚拟出第三个结点表示,如u->v.增加一个点p,u->p(INF ...

  4. 混合高斯模型的EM求解（Mixtures of Gaussians）及Python实现源代码

    今天为大家带来混合高斯模型的EM推导求解过程. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHVhbnl1YW5zZW4=/font/5a6L5L2T/ ...

  5. kqueue演示样例

    网络server通常都使用epoll进行异步IO处理,而开发人员通常使用mac,为了方便开发.我把自己的handy库移植到了mac平台上. 移植过程中,网上竟然没有搜到kqueue的使用样例.让我吃惊 ...

  6. 搜狗面试的经典题（C++map按值排序，class struct的差别）

    一:起因 (1)java  Map排序(key,value).请看还有一篇博客 java Map排序 (2)c++ map排序(key,value),能够对c++ map和java Map进行对照:之 ...

  7. JDBC连接mysql增删改查整体代码

    第一种比较low:用了statment,没有用preparedstatement.另外,插入时,不灵活,不能调用参数,但是如果直接给函数形参的话就会被SQL注入攻击,所以,最好在sql语句中使用?代表 ...

  8. 51nod-1359: 循环探求

    [传送门:51nod-1359] 简要题意: 给出n和k,求出最小的x满足$n^{x}≡n(mod\;10^{k})$ 题解: 真是一道有(du)趣(liu)题目 首先我们设X[k-1]为$n^{x} ...

  9. nyoj--1239--引水工程（最小生成树）

    引水工程 时间限制:2000 ms  |  内存限制:65535 KB 难度: 描述 南水北调工程是优化水资源配置.促进区域协调发展的基础性工程,是新中国成立以来投资额最大.涉及面最广的战略性工程,事 ...

  10. angular4过滤器

    Angular4中过滤器 一.大小写转换过滤器 uppercase将字符串转换为大写 lowercase将字符串转换为小写 <p>将字符串转换为大写{{str | uppercase}}& ...