锚点的运用一

最新推荐文章于 2022-01-07 17:10:48 发布

毛毛虫秀秀

最新推荐文章于 2022-01-07 17:10:48 发布

阅读量224

点赞数

分类专栏：前端工程师文章标签：锚点的运用一

本文链接：https://blog.csdn.net/jinpanjie/article/details/79672108

版权

前端工程师专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

点击div1切换到div1页面；点击div2切换到div2页面；点击div3切换到div3页面；

相关代码块

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

                                                           写于2018年3月23日

毛毛虫秀秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锚点的运用一

类似于Tab的功能主要思想是：三个div，因为是块元素所以把多余的部分隐藏起来。最后利用锚点的特性来进行切换。 [zpp]相关代码块&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;锚点运用-Tab...
复制链接

扫一扫