站内搜索:
首页 >> 前端 >> 内容
锚点的运用及相关代码块分享

时间:2018/3/24 11:10:29

类似于Tab的功能 主要思想是:三个p,因为是块元素所以把多余的部分隐藏起来。最后利用锚点的特性来进行切换。

锚点的运用及相关代码块分享

相关代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>锚点运用-Tab切换</title>
        <style type="text/css">
            body,ul,li{
                margin: 0;
                padding: 0;
            }
            .box,.p1,.p2,.p3{
                width: 300px;
                height: 300px;
            }
            .box{
                overflow: hidden;
            }
            .p1{
                background: red;
            }
            .p2{
                background: green;
            }
            .p3{
                background: orange;
            }
        </style>
    </head>
    <body>
        <a href="#p1">p1</a>
        <a href="#p2">p2</a>
        <a href="#p3">p3</a>
        <p class="box">
            <p class="p1" id="p1">p1</p>
            <p class="p2" id="p2">p2</p>
            <p class="p3" id="p3">p3</p>
        </p>
    </body>
</html>

  • 上一篇:web网页中添加富文本编辑(实例)
  • 下一篇:ES6知识点整理:Array常用扩展的应用方法
  • 返回顶部