a标签实现区域的快速切换

最新推荐文章于 2023-04-11 09:00:00 发布

是落落呢

最新推荐文章于 2023-04-11 09:00:00 发布

阅读量539

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/m0_46104664/article/details/113529115

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天想要实现一个功能，点击按钮能够快速切换右侧滚动区域的内容。期初笨蛋的我是想用Js写一个函数，实现这样的功能，但是后来突然想到了a标签好像可以实现这个功能。

这个用到的其实就是一个内容，将a标签的href属性设置为区域的id属性，这样就可以快速的实现切换啦！

下面就给一个简单的例子

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>position</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            a {
                text-decoration: none;
            }
            .out {
                width: 600px;
                height: 600px;
                overflow: scroll;
            }
            #one,#two,#three {
                width: 600px;
                height: 600px;
            }
            #one {
                background-color: black;
            }
            #two {
                background-color: red;
            }
            #three {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a>
        <div class="out">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
        </div>
    </body>
</html>

点击one，切换到id='one’的区域，点击two，切换到id='two’的区域，点击three，切换到id='three’的区域。
在这里插入图片描述

是落落呢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
a标签实现区域的快速切换

今天想要实现一个功能，点击按钮能够快速切换右侧滚动区域的内容。期初笨蛋的我是想用Js写一个函数，实现这样的功能，但是后来突然想到了a标签好像可以实现这个功能。这个用到的其实就是一个内容，将a标签的href属性设置为区域的id属性，这样就可以快速的实现切换啦！下面就给一个简单的例子<!doctype html><html> <head> <meta charset="utf-8"> <title>po
复制链接

扫一扫