史上最简单的选项卡
Posted 我因代码而疯狂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了史上最简单的选项卡相关的知识，希望对你有一定的参考价值。
今天有同学私信我说能不能出一篇简单点的选项卡教程，他在网上搜索的都是比较复杂的js，或者是加一些杂七杂八的样式，这样的内容根本看不懂，今天它来了：
是的你没有看错，这是史上最简单的选项卡，下面代码在写的时候我连class名字都没起，可想而知这是有多简单，并且没有用到Js，纯html，功能性代码只有两行，刚刚接触代码的同学们可以参考学习下，为了达到简单易懂的目的，我只加了一个浮动作为样式，接下来请欣赏代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>史上最简单的选项卡</title>
</head>
<style>
div>span{display:none;}/*让内容隐藏*/
div:hover>span{display: block}/*指上div的时候让内容显示*/
div{float:left}/*这个是样式可以去掉，与功能无关*/
</style>
<body>
<div>按钮1
<span >内容1</span>
</div>
<div>按钮2
<span>内容2</span>
</div>
</body>
</html>如果此时时刻看完代码的你还是觉得复杂，为了达到更简洁和让同学们更容易理解的目的我们可以去掉本项目中代码不必要的部分，然后它就变成了这样：
<style>
div>span{display:none;}/*让内容隐藏*/
div:hover>span{display: block}/*指上div的时候让内容显示*/
div{float:left}/*这个是样式可以去掉，与功能无关*/
</style>
<meta charset="UTF-8">
<title>史上最简单的选项卡</title>
<div>按钮1
<span >内容1</span>
</div>
<div>按钮2
<span>内容2</span>
</div>没错，大家看完改过之后的代码行数整整减少了一半，如果这时你还是看不懂，就赶紧找个班上吧。
如果同学们有什么更好的建议和想法，欢迎大家在评论区一起探讨这个值得我们热爱的语言。
以上是关于史上最简单的选项卡的主要内容，如果未能解决你的问题，请参考以下文章