html+css实现选项卡功能
<!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实现选项卡功能的更多相关文章
- JS+CSS实现选项卡功能
[小小一记] 首先我们写一个选项卡的结构出来,包括tab和content: 首先是tab: <ul class="ttitle-box-tabs" id="tabs ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- 使用原生js实现选项卡功能实例教程
选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...
- css Tab选项卡
css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...
- css Tab选项卡1
利用 锚点原理 以及overflow:hiden 结合,实现纯 css tab 方式 兼容ie6 + 适合单个tab 不需要js 注意点 红色方框的 a 对应a ...
- Android中选项卡功能的实现
Android中选项卡功能的实现 Android中使用TabHost和TabWidget来实现选项卡功能.TabHost必须是布局的根节点,它包含两个子节点: TabWidget,显示选项卡: Fra ...
- js进阶 11-21 纯css实现选项卡
js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...
- 原生Js_实现简单选项卡功能
javascript实现选项卡功能,在<script>...</script>中编写代码 实现步骤 a)获得各操作的dom对象: b)在所有按钮对象上添加单击事件: c)设置所 ...
随机推荐
- POJ 3749
第一道简单密码学的题,太水了,本不打算做,第一道,还是纪念一下. #include <iostream> #include <cstdio> #include <cstr ...
- Sybase数据库工具DbVisualizer乱码问题
使用DbVisualizer来操作sybase数据库的时候,会出现乱码问题,中文变成 '口口'. 解决的方法例如以下: 将这三个字体都改成 "宋体" 或者改成 "PM ...
- 基础数位DP小结
HDU 3555 Bomb dp[i][0] 表示含 i 位数的方案总和. sp[i][0] 表示对于位数为len 的 num 在区间[ 10^(i-1) , num/(10^(len-i)) ] 内 ...
- 深入分析Java中的I/O类的特征及适用场合
Java中有40多个与输入输出有关的类.假设不理清它们之间的关系.就不能灵活地运用它们. 假设从流的流向来分,可分为输入流和输出流,而输入流和输出流又都可分为字节流和字符流.因而可将Java中的I/O ...
- 初始化的数值（int、double等）(一)
首先考虑一个具有几个构造函数的MyClass类.如果我们决定在这个类的私有部分加入一个新的数据成员,称为int_data_: class MyClass { public: MyClass() : i ...
- Oracle分析函数ntile
有这么一个需求.将课程的成绩分成四个等级,为学生打A.B.C.D的绩效. drop table course purge; create table course ( id number, g ...
- ThinkPHP5.0框架开发--第7章 TP5.0数据库操作
ThinkPHP5.0框架开发--第7章 TP5.0数据库操作 第7章 TP5.0数据库操作 ===================================================== ...
- CCS+C6678LE开发记录11:多核协作(IPC)入门
为更好地发挥C6678的多核性能,需要用到多核协作.幸运的是,我们可以使用官方提供的IPC模块. IPC=Inter-Processor Communication, 核间通信,粗略来说就是多核之间进 ...
- 深入C#类的方法
构造函数 example1: static void Main(string [] args) { SE engineer=new SE(); engineer.Age=; enginner.Name ...
- Servlet学习(九)——request
request运行流程在Servlet学习(四)——response已介绍,不再赘述 1.通过抓包工具获取Http请求 因为request代表请求,所以我们可以通过该对象分别获得Http请求的请求行, ...