史上最简单的选项卡

最新推荐文章于 2023-07-01 18:20:34 发布

我因代码而疯狂

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量191

点赞数 1

分类专栏： Html 文章标签：选项卡简单教程 html

本文链接：https://blog.csdn.net/qq_39476250/article/details/118080601

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天有同学私信我说能不能出一篇简单点的选项卡教程，他在网上搜索的都是比较复杂的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>

没错，大家看完改过之后的代码行数整整减少了一半，如果这时你还是看不懂，就赶紧找个班上吧。

如果同学们有什么更好的建议和想法，欢迎大家在评论区一起探讨这个值得我们热爱的语言。

我因代码而疯狂

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
史上最简单的选项卡

<!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.
复制链接

扫一扫

专栏目录