用CSS伪选择器实现脚本控制的按钮功能

最新推荐文章于 2024-06-19 15:19:49 发布

塞上江南果

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量993

点赞数

分类专栏： CSS 文章标签： css 性能

本文链接：https://blog.csdn.net/Picking_up_stones/article/details/63254638

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

记得之前看到一句话“为了性能考虑，能用CSS实现的特效和功能，尽量不要使用JavaScript脚本”，因为JS的特效基本都是针对DOM节点的操作，只要DOM发生变化，就肯定会引起回流，回流是比较消耗资源的，所以为了性能考虑能避免就要避免。下面介绍两种CSS伪选择器实现按钮功能。

一. checked伪选择器

大家都知道表单中的复选框<input type="checkbox">，可以配合<label>元素一起使用，点击<label>就相当于勾选了复选框，而且点击第二次，就相当于取消勾选。所以我们可以用这种特性来实现，用按钮操作时元素的显示和隐藏。代码如下：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

    .div-container{
        display: none;
        width:200px;
        height:auto;
        border: 1px #ccc solid;
        padding: 20px;
    }

    #show{
        display: none;
    }

    #hidden{
        display: none;
    }

    #show:checked ~ .div-container{
        display: block;
    }


</style>    

</head>

<body>

<show id="divid">
    <div class="menu-btn">
        <label for="show">显示</label>
    </div>
    <input type="checkbox" id="show">
    <div class="div-container">
        你是我心中的碧海蓝天
    </div>
</show>


<script type="text/javascript">


</script>
</body>
</html>

当点击<label> 时就相当于勾选了<input> 元素，第二次点击相当于取消了勾选，再选择适合的选择器就可以实现想要的效果。

效果如图：
这里写图片描述

二. 使用target伪选择器

大家都知道，我们可以给一个<div>加一个id属性，然后<a> 标签设置瞄点，当点击<a>标签时就会定位到<div>元素所在的位置。同样我们也可以给设有id属性的标签用target伪选择器来设置当点击<a> 元素后它的CSS样式。代码如下：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

    .div-container{
        display: none;
        width:200px;
        height:auto;
        border: 1px #ccc solid;
        padding: 20px;
    }

    a{
        text-decoration: none;
    }

    #show:target> .div-container{
        display: block;
    }

    #show:target> .menu-btn> a:first-of-type{
        display: none;
    }

    #show:not(:target)> .div-container{
        display: none;
    }
    //not的意思是当瞄点不在show元素时
    #show:not(:target)> .menu-btn> a:last-of-type{
        display: none;
    }
</style>    

</head>

<body>

<show id="show">
    <div class="menu-btn">
        <a href="#show">显示</a>
        <a href="#hidden">隐藏</a>
    </div>
    <div class="div-container">
        你是我心中的碧海蓝天
    </div>
</show>


<script type="text/javascript">


</script>
</body>
</html>