<!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内核（五）虚拟文件系统

    虚拟文件系统(VFS)是linux内核和具体I/O设备之间的封装的一层共通访问接口,通过这层接口,linux内核可以以同一的方式访问各种I/O设备. 虚拟文件系统本身是linux内核的一部分,是纯软件 ...

  2. CSS学习（三）

    CSS 分组 和 嵌套 选择器 分组选择器 h1,h2,p { color:green; } 嵌套选择器 <!DOCTYPE html> <html> <head> ...

  3. 编写html经常使用而又easy忘记的语句

    设置文件字符编码: <meta charset="utf-8"> 内部样式表: <style type="text/css"> hr { ...

  4. iOS 手势识别器概述

    手势识别器 iOS 手势识别器(UIGestureRecognizer) 点击手势(UITapGestureRecognizer) 滑动手势(UISwipeGestureRecognizer) 旋转手 ...

  5. 对象不支持“abigimage”属性或方法

    在一个网页中用了一个js插件, js文件引用的没有错,代码也和demo差点儿相同,  可是执行时ie的调试工具报了一个错: 解决方式: jquery文件冲突,发现原来自己引过一个 <script ...

  6. Codeforces Round #286 (Div. 1) B. Mr. Kitayuta&#39;s Technology （强连通分量）

    题目地址:http://codeforces.com/contest/506/problem/B 先用强连通判环.然后转化成无向图,找无向图连通块.若一个有n个点的块内有强连通环,那么须要n条边.即正 ...

  7. node--20 moogose demo2

    db.js /** * Created by Danny on 2015/9/28 16:44. */ //引包 var mongoose = require('mongoose'); //创建数据库 ...

  8. 51nod 1649 齐头并进 (djikstra求最短路径，只用跑一次)

    题目: 这道题有一个坑点:两种交通工具同时出发,中途不能停留在同一个小镇. 其实想通了就很简单,因为要么火车一步到达,要么汽车一步到达.不可能停留在同一个地方. 可是我还WA了好几次,蠢哭.想用BFS ...

  9. .map(function(item)...)这个是按hashcode自动遍历的，怎么才能按照我想要的顺序遍历呢？

    上图是我前端的遍历代码.我的item上有一个name的字段,分别是营业执照,税务登记证和经营许可证,我怎么设置才能让函数每次遍历的时候按照这个顺序遍历,而不是item自带的顺序呢? .map(func ...

  10. 【原创】JMS发布者订阅者【异步接收消息】

    发布订阅模式和PTP方式不同之处为后者依赖于一个Topic话题: package com.thunisoft.jms.mine.topic; import java.util.HashMap; imp ...