【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的目的是为了做一个标记，表示这个是点选或者默认显示的内容。

效果：

接下来，我们给整个块加一个框，并且给各个元素都加上边框，这样看得更清楚一些。

效果：

我们把3个标题向左浮动，并且调整一下字体的大小，布局等等。

效果：

3个标题貌似被盖住了...

这是由于标题浮动引起的。

我们把内容给clear一下就行了。

效果：

这样看起来好一些，不过距离目的还差得远。

接下来，我们设置内容的样式。设置了父框的宽度，并且将整个父元素块居中。

效果：

这样看起来就舒服多了！

至于如何体现选项卡的效果，我们通过内容的显示与隐藏来控制。display:[none block]

效果：

这里只看到了“教育内容”，其他内容则被隐藏了。

如何凸现哪个被点选和内容的显示呢，我们给他设置背景颜色。

#tab h3.active {
background: #cccc00;
}
#tab div.content {
display: block;
background: #cccc00;
}

效果：

现在这个还是一个固定的显示，我们给3个标题注册点击事件，通过点击标题切换标题和内容的标记class，来达到切换选项卡的目的。

这样我们点击其他标题

最后我们给微调下，去除表框，添加阴影，附上完整代码:

<!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>