【Css】一个简单的选项卡
这次来做一个简单的选项卡。
选项卡其实就分3个部分：html代码，用于显示的内容；css代码，用于显示的样式；javascript代码，用于点击事件。
老规矩，先写一个html坯子。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>选项卡</title>
</head> <body>
<div id="tab">
<h3 class="active">教育</h3>
<h3>娱乐</h3>
<h3>汽车</h3> <div class="content">教育内容</div>
<div>娱乐内容</div>
<div>汽车内容</div>
</div>
</body>
</html>
html代码里只给“教育”和“教育内容”设置class的目的是为了做一个标记，表示这个是点选或者默认显示的内容。
效果：
接下来，我们给整个块加一个框，并且给各个元素都加上边框，这样看得更清楚一些。
<style type="text/css">
#tab {
border: 2px solid;
}
#tab h3 {
border: 1px solid #cccccc;
}
#tab div {
border: 1px solid #cccccc;
}
</style>
效果：
我们把3个标题向左浮动，并且调整一下字体的大小，布局等等。
<style type="text/css">
#tab {
border: 2px solid;
}
#tab h3 {
border: 1px solid #cccccc;
margin: 2px 1px 0px 1px;
padding: 0px;
font-size: 14px;
float: left;
right: 5px;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
}
#tab div {
border: 1px solid #cccccc;
}
</style>
效果：
3个标题貌似被盖住了...
这是由于标题浮动引起的。
我们把内容给clear一下就行了。
<style type="text/css">
#tab {
border: 2px solid;
}
#tab h3 {
border: 1px solid #cccccc;
margin: 2px 1px 0px 1px;
padding: 0px;
font-size: 14px;
float: left;
right: 5px;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
}
#tab div {
clear: both;
border: 1px solid #cccccc;
}
</style>
效果：
这样看起来好一些，不过距离目的还差得远。
接下来，我们设置内容的样式。设置了父框的宽度，并且将整个父元素块居中。
<style type="text/css">
#tab {
border: 2px solid;
width: 500px;
margin: 0 auto;
}
#tab h3 {
border: 1px solid #cccccc;
margin: 2px 1px 0px 1px;
padding: 0px;
font-size: 14px;
float: left;
right: 5px;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
}
#tab div {
border: 1px solid #cccccc;
clear: both;
height: 100px;
font-size: 14px;
padding: 20px 0px 0px 20px;
}
</style>
效果：
这样看起来就舒服多了！
至于如何体现选项卡的效果，我们通过内容的显示与隐藏来控制。display:[none block]
<style type="text/css">
#tab {
border: 2px solid;
width: 500px;
margin: 0 auto;
}
#tab h3 {
border: 1px solid #cccccc;
margin: 2px 1px 0px 1px;
padding: 0px;
font-size: 14px;
float: left;
right: 5px;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
}
#tab div {
border: 1px solid #cccccc;
clear: both;
height: 100px;
font-size: 14px;
padding: 20px 0px 0px 20px;
display: none;
}
#tab div.content {
display: block;
}
</style>
效果：
这里只看到了“教育内容”，其他内容则被隐藏了。
如何凸现哪个被点选和内容的显示呢，我们给他设置背景颜色。
#tab h3.active {
background: #cccc00;
}
#tab div.content {
display: block;
background: #cccc00;
}
效果：
现在这个还是一个固定的显示，我们给3个标题注册点击事件，通过点击标题切换标题和内容的标记class，来达到切换选项卡的目的。
<script type="text/javascript">
window.onload = function() {
var oTab = document.getElementById("tab");
var aH3 = oTab.getElementsByTagName("h3");
var aDiv = oTab.getElementsByTagName("div");
for (var i = 0; i < aH3.length; i++) {
aH3[i].index = i;
aH3[i].onclick = function() {
for (var i = 0; i < aH3.length; i++) {
aH3[i].className = "";
aDiv[i].style.display = "none";
aDiv[this.index].className = "";
aDiv[this.index].className = "content";
}
this.className = "active";
aDiv[this.index].style.display = "block";
};
}
};
</script>
这样我们点击其他标题
最后我们给微调下，去除表框，添加阴影，附上完整代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>选项卡</title>
<style type="text/css">
#tab {
width: 500px;
margin: 0 auto;
box-shadow: 5px 5px 5px #888888;
}
#tab h3 {
margin: 0px;
padding: 0px;
font-size: 14px;
float: left;
right: 5px;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
}
#tab div {
clear: both;
height: 100px;
font-size: 14px;
padding: 20px 0px 0px 20px;
display: none;
}
#tab h3.active {
background: #cccc00;
}
#tab div.content {
display: block;
background: #cccc00;
}
</style> <script type="text/javascript">
window.onload = function() {
var oTab = document.getElementById("tab");
var aH3 = oTab.getElementsByTagName("h3");
var aDiv = oTab.getElementsByTagName("div");
for (var i = 0; i < aH3.length; i++) {
aH3[i].index = i;
aH3[i].onclick = function() {
for (var i = 0; i < aH3.length; i++) {
aH3[i].className = "";
aDiv[i].style.display = "none";
aDiv[this.index].className = "";
aDiv[this.index].className = "content";
}
this.className = "active";
aDiv[this.index].style.display = "block";
};
}
};
</script>
</head> <body>
<div id="tab">
<h3 class="active">教育</h3>
<h3>娱乐</h3>
<h3>汽车</h3> <div class="content">教育内容</div>
<div>娱乐内容</div>
<div>汽车内容</div>
</div>
</body>
</html>
效果：
这个选项卡只有最基本的功能。如果进一步，我们可以在内容块里加入图片库，把标题背景设置为图片，这样就能做出很漂亮的选项卡。
【Css】一个简单的选项卡的更多相关文章
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- JS入门学习，写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
- vue实现一个简单的选项卡
用vue来实现一个小的选项卡切换,比之前要简单.方便很多. <!DOCTYPE html> <html lang="en"> <head> &l ...
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- javascript简单的选项卡
实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 三行Jquery代码实现简单的选项卡
今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...
- react做的简单的选项卡
### 首先安装react的脚手架 cnpm install create-react-app -g 只需要在电脑下载安装一次即可 ###创建项目 create-react-ap ...
- Css实现一个简单的幻灯片效果页面
使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...
- CSS布局中一个简单的应用BFC的例子
什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...
随机推荐
- 简单介绍Java的静态分派和动态分派
最近复习JVM的知识,对于静态分派和动态分派的理解有点混乱,于是自己尝试写写代码,在分析中巩固知识. 有如下一段代码,请问每一段分别输出什么? package com.khlin.my.test; c ...
- Tomcat version 6.0 only supports J2EE 1.2 ......
在project的.setting folder下面,有个名为org.eclipse.wst.common.project.facet.core.xml的文件,里面配置有各种版本信息.此时,按照本机配 ...
- C语言程序设计
从 大一下 开始写博客,记录自己的学习. 而作为一个强迫症(比如我)是不允许做事缺头少尾的. 想了想还是得大一所学的C语言也搬上来,虽然结构老师经常嘲讽 (也不算嘲讽,算是絮叨吧)我的C语言,但是我还 ...
- java远程开关机
最近,很多客户向我们反馈终端启动后异常的问题,因此,我自己做了一个远程开关的小工具,该工具的目的在于通过批量的方式来控制终端启动.其设计逻辑是通过服务端发送cmd指令 ,客户端接受并执行指令,把结果返 ...
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- “全栈2019”Java第二十五章：流程控制语句中循环语句while
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 洛谷P5265 【模板】多项式反三角函数
题面 传送门 题解 我数学好像学得太差了 据说根据反三角函数求导公式 \[{d\over dx}\arcsin x={1\over \sqrt{1-x^2}}\] \[{d\over dx}\arct ...
- mySQL授权（让从服务器用户可以登录到主服务器）
mySQL授权(让从服务器用户可以登录到主服务器) 1.查看用户授权表 ? 1 select user,host,password from mysql.user; 2.给用户设置密码 ? 1 2 u ...
- [转] 以普通用户启动的Vim如何保存需要root权限的文件
[转] 以普通用户启动的Vim如何保存需要root权限的文件 在Linux上工作的朋友很可能遇到过这样一种情况,当你用Vim编辑完一个文件时,运行:wq保存退出,突然蹦出一个错误: E45: 'rea ...
- 基于DALN方案C/S架构运用
今天闲来无事,看到笔记本的蓝牙设备想着:可不可以实现电脑端播放手机端的音频. 刚刚开始想着基于蓝牙,尝试多次无解(主要原因是没有找到支持此功能的软件) 最后:有朋友建议可以研究下DALN方案解决这个需 ...