关于锚点和label的纯css内容切换

最新推荐文章于 2022-12-27 22:20:32 发布

TestGreeting

最新推荐文章于 2022-12-27 22:20:32 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css 锚点纯css效果

本文链接：https://blog.csdn.net/TestGreeting/article/details/70164830

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于锚点的几则

锚点跳转就是根据url跳转，做的一项定位

一般有两种方法：
1. a标签的name属性
2. id

考虑每次使用a的name有点浪费标签，所以建议使用id

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
    <style>
        .container{width: 850px;height: 880px;text-align: center;margin: 0 auto;}
        .return{position: fixed;bottom: 50px;}
    </style>
</head>
<body>
<div class="container">
    <img src="http://maopeijiong.site/src/img/grimm.jpg" alt="格林猎人图片一张" id="re"></img>
</div>
<a href="#re"><p class="return">返回至图片</p></a>
</body>
</html>

查看效果

一些想法

注意到点击返回后的url变成了
点击后的地址栏

url里多了一个hash，是这么叫的吧(反正chrome里是location.hash这么叫的)。所以这锚点跳转可以看到一个链接跳转，和点击滚动事件(jquery 的offset().top)还是有本质区别的，不过jquery跳转平缓很多，锚点跳转感官上不咋地。

纯css实现的切换

锚点跳转也算是css跳转，突然想到用label的属性实现的内容切换，就一并复习下。

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label切换内容</title>
    <style>
        .container{width: 800px;height: 250px;margin: 0 auto;position: relative;}
        .tab{width: 25%;float: left;margin-right: -1px;box-sizing: border-box;}
        .tab .testTabLabel{text-align: center;display: block;background: #e2e2e2;height: 24px;padding: 5px 0;border: 1px solid #ccc;}
        .tab .test-radio, .tab .testTabCon{position: absolute;left: -999em;}
        .test-radio:checked ~ .testTabLabel{border-bottom: 1px solid #fff;background: #fff;position: relative;z-index: 1;}
        .test-radio:checked ~ .testTabCon{left: 0;border: 1px solid #ccc;border-top: 0;width: 763px;padding: 2em 1em;}
    </style>
</head>
<body>
<div class="container">
    <div class="tab">
        <input type="radio" id="testTabOne" class="test-radio" name="tab" checked="checked"/>
        <label class="testTabLabel" for="testTabOne">选项1</label>
        <div class="testTabCon">
            <p>第一张选项卡的内容</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="testTabTwo" class="test-radio" name="tab"/>
        <label class="testTabLabel" for="testTabTwo">选项1</label>
        <div class="testTabCon">
            <p>第二张选项卡的内容</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="testTabThree" class="test-radio" name="tab"/>
        <label class="testTabLabel" for="testTabThree">选项1</label>
        <div class="testTabCon">
            <p>第三张选项卡的内容</p>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="testTabFour" class="test-radio" name="tab"/>
        <label class="testTabLabel" for="testTabFour">选项1</label>
        <div class="testTabCon">
            <p>第四张选项卡的内容</p>
        </div>
    </div>
</div>
</body>
</html>