<!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. [terry笔记]python内置函数

    总结一下内置函数,Build-in Function. 一.数学运算类 abs(x) 求绝对值 complex([real[, imag]]) 创建一个复数 divmod(a, b) 分别取商和余数注 ...

  2. 程序猿的量化交易之路（21）--Cointrader之Currency货币实体（9）

    转载须注明出自:http://blog.csdn.net/minimicall? viewmode=contents,http://cloudtrader.top 货币,Cointrader中基本实体 ...

  3. hdu 3449 Consumer （依赖01背包）

    题目: 链接:pid=3449">点击打开链接 题意: 思路: dp[i][j]表示前i个箱子装j钱的材料可以得到的最大价值. 代码: #include<iostream> ...

  4. Azure RBAC（Roles Based Access Control）正式上线了

    期盼已久的Azure RBAC(Roles Based Access Control)正式上线了. 在非常多情况下.客户须要对各种类型的用户加以区分,以便做出适当的授权决定.基于角色的訪问控制 (RB ...

  5. VS2008执行MFC程序，提示microsoft incremental linker已停止工作解决方法

    事实上这边是由于设置有问题.详细的解决方式例如以下: 第一步:点击项目->"你的文件"属性->配置属性->链接器->启用增量链接   将  是(/INCRE ...

  6. 30个php操作redis经常用法代码样例

    这篇文章主要介绍了30个php操作redis经常用法代码样例,本文事实上不止30个方法,能够操作string类型.list类型和set类型的数据,须要的朋友能够參考下 redis的操作非常多的,曾经看 ...

  7. hdu 2604 Queuing （矩阵高速幂）

    Queuing Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  8. 固比固布局 圣杯布局 css实现传统手机app布局

    手机app的布局大致上都是头部.内容.底部三部分: 我们需要实现的是头部.底部高度固定:中间内容区域自适应且可以滚动:直接贴代码: css: html,body { width: 100%; heig ...

  9. Linux就该这么学 20181002(第二章基础命令)

    参考链接https://www.linuxprobe.com/ 忘记密码操作 启动页面 默认按e 在linux16行后空格 rd.break ctrl + x mount -o remount,rw ...

  10. POJ 3368 线段树

    思路: 先统计在第i个位置当前数字已经出现的次数. 维护两个数组,一个是当前位置的数字最后一次出现的位置,另一个是当前位置的数字第一次出现的位置 查找的时候分为两种情况: 没有和边界相交(意会意会)的 ...