您的位置：首页 > Web前端 > CSS

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

2017-03-18 15:12 302 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 性能

相关文章推荐

新的分享

章节导航