时间戳

首页 > 解决方案 > 我可以使用 CSS 选择器进行 onclick 事件吗？

css - 我可以使用 CSS 选择器进行 onclick 事件吗？

问题描述

我需要代码作为 onclick 事件工作，该事件应该打开类似于 JS 按钮的 textEditor。有可能这样做吗？:target 没有完成工作。

<!DOCTYPE html>
<html>
<body>
<style>

#textEditor {
    display: none;
}

#textEditor:target {
    border: 1px dashed black;  
    width: 1350px; 
    height: 600px;
    display: block;
}
</style>   

<a href= "#textEditor">Add Notes</a>
<div id= "textEditor" contenteditable="true"></div>

</body>
</html>


#textEditor {
  display: none;
}

#textEditor:target {
  border: 1px dashed black;
  width: 1350px;
  height: 600px;
  display: block;
}
<a href="#textEditor">Add Notes</a>
<div id="textEditor" contenteditable="true"></div>

标签： cssonclickcss-selectorsbuttonclick

解决方案

鉴于您的意图是创建一个纯 CSS 切换，有几个选项可供您使用；一个是使用一个复选框<input>，另一个是使用另一个第二个<a>元素。

一、<input>做法：

#textEditor_toggle~#textEditor {
  display: none;
}

#textEditor_toggle:checked~#textEditor {
  border: 1px dashed black;
  width: 50vw;
  height: 50vh;
  display: block;
  margin: 1em auto;
}

#textEditor_toggle {
  display: none;
}

#textEditor_toggle+label::before {
  content: 'Open';
}

#textEditor_toggle:checked+label::before {
  content: 'Close';
}
<input type="checkbox" id="textEditor_toggle"><label for="textEditor_toggle"> Editor</label>
<div id="textEditor" contenteditable="true" autofocus></div>

其次，通过第二个链接：

#textEditor {
  display: none;
}

#textEditor:target {
  border: 1px dashed black;
  width: 50vw;
  height: 50vh;
  display: block;
  grid-area: editor;
}

div {
  display: grid;
  grid-template-areas: "toggle" " editor";
}

a.open {
  grid-area: toggle;
}

#textEditor:target+a.open {
  display: none;
}

a.close {
  display: none;
  grid-area: toggle;
}

#textEditor:target~a.close {
  display: block;
}
<div>
  <div id="textEditor" contenteditable="true"></div>
  <a href="#textEditor" class="open">Add Notes</a>
  <a href="#" class="close">Close Notes</a>
</div>

推荐阅读