用css实现 js 的点击效果

也不知道大家平常的点击事件都是怎写的，我的话倒是经常使用以下这种方式

<div onclick="promptThis()">
    点击我！！
</div>

<!--别忘了引入js-->
<script src="1.js"></script>

然后在js封装一片代码，命名为 promptThis

（操作、提示、或者啥的）

function promptThis() {
    alert("你点了我！")
}

结果：

注意：

js点击事件在苹果端会失效，

在安卓机上，我们随意定义点击事件也能够在找到点击的元素，但是在苹果端上就是不行，怎么点击都没有效果。

这是因为在苹果机上window禁止了手指误点功能，必须解除这一功能，或者给点击事件指引某个元素上绑定了事件。最好的解决方法如下：

div{
    cursor: pointer;
}

=========分割线==================

但是后来，在学习响应式布局的时候，

一个教学视频彻底的刷新了我对前端的观念，

https://www.bilibili.com/video/av9468753/?p=4

原来，css也是可以做到用户操作的功能的，顿悟~

在这视频中，需要的控件有

<input id=“thisOnClick” type="checkbox">

原理：

在控件 <input id=“thisOnClick” type="checkbox"> 中，有这么一个伪类元素 :checked （敲黑板，重点）

当多选按钮选中之后，会有触发伪类元素 :checked （敲黑板，重点），取消选中之后，则会失效；

假如：当触发伪类元素 :checked 后，修改兄弟（兄弟元素，子元素等）元素的样式，不就成了简单的点击事件嘛

步骤1、

举个例子：

html代码如下

<input id="thisOnClick" type="checkbox">
<div>
    不稀罕js，咱用css做点击！
</div>

css代码如下

<style>
    #thisOnClick:checked ~div{
        background: aquamarine;
    }
</style>

结果如下：

代码截图：

步骤2、

这时候，只要在利用控件 label 绑定 id为thisOnClick的控件，html实现代码如下

<label for="thisOnClick">
    <div>
        点击我，则会触发ID为thisOnClick 的checkbox控件
    </div>
</label>

<input id="thisOnClick" type="checkbox">

<div>
    不稀罕js，咱用css！
</div>

实现效果

代码截图

发挥下想象，把 checkbox 隐藏，这不就是点击修改样式的一个操作了嘛~~

注意哦，在一些可以编辑网页css的网站，这个也能是实现的（比如博客园），需要自己发挥下创意~

案例如下：

前端

点击我！！！！

不稀罕js，咱用css！

代码如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>前端</title>

</head>
<style>
    #thisOnClick:checked ~.hiddenDiv{
        background: aquamarine;
        display: block;
    }
    .showText{
        width: 200px;
        height: 100px;
        background: aqua;
    }
    .checkbox{
        display: none;
    }
    .hiddenDiv{
        display: none;
        width: 200px;
        height: 100px;
    }
    .frame{
        border: bisque 10px solid;
    }
</style>
<body>

<div class="frame">
    <label for="thisOnClick">
        <div class="showText">
            点击我！！！！
        </div>
    </label>
    <input id="thisOnClick" type="checkbox" class="checkbox">
    <div class="hiddenDiv">
        不稀罕js，咱用css！
    </div>
</div>

</body>
</html>

用css实现 js 的点击效果

猜你喜欢