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

记得之前看到一句话“为了性能考虑,能用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>

在上面的例子中有两个瞄点,一个用于显示,一个用于隐藏,当点击瞄点为show的标签时,元素显示;点击瞄点为hidden时,元素隐藏,此时用了否定选择器not,它的意思是当瞄点不在该标签时。

效果如图:

这里写图片描述


以上的内容都是一些小技巧,当然CSS不能做JS所能做的全部事,但是还是那句话“能用CSS实现的,尽量不要用JavaScript”。

-------------本文结束感谢您的阅读-------------