Js achieve the effect by clicking css

We usually do not know how to write all the click event, I'd then less frequently used in this way

< Div onclick = "promptThis ()" > 
    Click me! ! 
</ Div >

<! - Remember incorporated JS -> 
<Script the src = "1.js"> </ Script>

Then a package js code named promptThis

(Operation, prompt, or Han)

function promptThis () { 
    Alert ( "you point me!" ) 
}

result:

note:

js click events will expire at the end of Apple,

On the Android machine, we arbitrarily define the click event can also find elements of clicks, but is not on the Mac side, how clicks to no avail.

This is because on a Mac window function is disabled finger delays, this function must be lifted, or to bind the click event guide on an element of the event. The best solution is as follows:

div{
    cursor: pointer;
}

========= dividing line ==================

But then, in response to learning layout of the time,

An instructional video completely refresh my concept of the front end,

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

The original, css also feature user can do the operation, the epiphany ~

In this video, the controls need to have

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

principle:

In the control <input id = "thisOnClick" type = "checkbox"> , there is such a pseudo-class elements : the checked (knock on blackboard, focus)

When the radio button is selected, there will be triggered pseudo-class elements : the checked (knock on blackboard, focus), then unchecked, it will fail;

If: When the trigger pseudo-class element : checked after modification brothers (sibling, child elements, etc.) elements of style, not to become a simple click events Well

step 1,

for example:

html code follows

< The INPUT the above mentioned id = "thisOnClick" of the type = "the CheckBox" > 
< div > 
    do not care js, css we used to do click! 
</ Div >

css code as follows

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

The results are as follows:

Code Screenshot:

Step 2,

This time, as long as the binding id using the control label is thisOnClick controls, html codes are as follows

< Label for = "thisOnClick" > 
    < div > 
        Click me, it will trigger ID is thisOnClick the checkbox controls 
    </ div > 
</ label > 

< the INPUT the above mentioned id = "thisOnClick" of the type = "checkbox" > 

< div > 
    do not care js , we use css! 
</ Div >

Achieve results

Code Screenshot

发挥下想象，把 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>

Js achieve the effect by clicking css

Guess you like