问题：

在onclick事件发生后，我如何停止CSS面板相互坐在一起？

牟飞沉

2023-03-14

我有两个“onclick”按钮，它们都打开各自的面板。需要什么代码来确保您必须先'x'选定的面板，然后才能通过“其他”按钮查看其他面板？当前，如果你一个接一个地点击，它们就会一个接一个地坐在上面。

这段代码的框架摘自W3学校网站：

下面是我的代码。

  <!DOCTYPE html>
<html>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.button {
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:#000;
  background-color:#ffffff;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  border: 1px solid #000;
 }
 
 
.button:hover {
  color:#000!important;
  background-color:#ccc!important;
}
 
.closebtn {
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background-color:#000;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  position: absolute;
  right:0;
  top:0
 }
 
 .closebtn:hover {
  color:#000!important;
  background-color:#ccc!important;
}

.container,.w3-panel {
padding:0.01em 16px
}

.panel {
margin-top:16px;
margin-bottom:16px;
background-color: #ffffff;
}

.tooltip,.display-container  {
    position:relative
    
}

.tooltip .text {
display:none
}

.tooltip:hover .text {
display:inline-block
}

.display-container:hover display-hover {
display:block
}

.display-container:hover span.display-hover {
display:inline-block
}

.display-hover {
display:none}

.display-topright {
position:absolute;right:0;top:0
}

.cvheader {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  font-weight: bold;    
}

.pCV {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 0;
}
</style>
<body>

<button class="button" onclick="document.getElementById('id01').style.display='block'">CV 1</button> 

<button class="button" onclick="document.getElementById('id02').style.display='block'">CV 2</button> 

<div id="id01" class="panel display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="closebtn">x</span>
  <h2 class="cvheader">RECENT/ UPCOMING PRESENTATIONS</h2>
                  <br>
                  <p class="pCV">Exhibitions, commisions.</p>
                  <p class="pCV">Exhibitions, commisions.</p>
</div>

<div id="id02" class="panel display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="closebtn">x</span>
  <h2 class="cvheader">PUBLIC EVENTS</h2>
                  <br>
                  <p class="pCV">Talks, Exhibitions </p>
                  <p class="pCV">Talks, Exhibitions </p>
                  
</div>

</body>
</html>

共有1个答案

司马辉

2023-03-14

 <!DOCTYPE html>
<html>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.button {
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:#000;
  background-color:#ffffff;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  border: 1px solid #000;
 }
 
 
.button:hover {
  color:#000!important;
  background-color:#ccc!important;
}
 
.closebtn {
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background-color:#000;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  position: absolute;
  right:0;
  top:0
 }
 
 .closebtn:hover {
  color:#000!important;
  background-color:#ccc!important;
}

.container,.w3-panel {
padding:0.01em 16px
}

.panel {
margin-top:16px;
margin-bottom:16px;
background-color: #ffffff;
}

.tooltip,.display-container  {
    position:relative
    
}

.tooltip .text {
display:none
}

.tooltip:hover .text {
display:inline-block
}

.display-container:hover display-hover {
display:block
}

.display-container:hover span.display-hover {
display:inline-block
}

.display-hover {
display:none}

.display-topright {
position:absolute;right:0;top:0
}

.cvheader {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  font-weight: bold;    
}

.pCV {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 0;
}
</style>
<body>

<button class="button" onclick="openCV1()">CV 1</button> 

<button class="button" onclick="openCV2()">CV 2</button> 

<div id="id01" class="panel display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="closebtn">x</span>
  <h2 class="cvheader">RECENT/ UPCOMING PRESENTATIONS</h2>
                  <br>
                  <p class="pCV">Exhibitions, commisions.</p>
                  <p class="pCV">Exhibitions, commisions.</p>
</div>

<div id="id02" class="panel display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'"
  class="closebtn">x</span>
  <h2 class="cvheader">PUBLIC EVENTS</h2>
                  <br>
                  <p class="pCV">Talks, Exhibitions </p>
                  <p class="pCV">Talks, Exhibitions </p>
                  
</div>

</body>
</html>

在js文件中可以添加以下代码：

function openCV1() {
if (document.getElementById('id02').style.display !='block') {

document.getElementById('id01').style.display='block';
}
}

function openCV2() {
if (document.getElementById('id01').style.display !='block') {


document.getElementById('id02').style.display='block'
}
}

类似资料：

如何在我停止输入/写入后触发输入文本中的事件？

我想在我停止在输入文本框中键入字符（而不是在键入字符时）后触发一个事件。我尝试过：但是这个例子为每个输入的字符产生一个超时，如果我输入20个字符，我会收到大约20个AJAX请求。在这个小提琴上，我用一个简单的警报而不是AJAX来演示同样的问题。有解决办法吗，还是我只是用了一个糟糕的方法？
如何使用内联onclick属性停止事件传播？

问题内容：考虑以下：如何做到这一点，以便当用户单击范围时不会触发的click事件？问题答案：使用event.stopPropagation（）。对于IE：
JavaScript如何使用内联onclick属性停止事件传播？

问题内容：考虑以下：如何做到这一点，以便当用户单击范围时不会触发的click事件？问题答案：使用event.stopPropagation（）。对于IE：
React-ul with onBlur事件阻止onClick在li上触发

我创建了一个移动下拉菜单，可以根据状态切换打开和关闭。一旦它被打开，我希望用户能够通过点击ul之外的任何地方来关闭下拉列表。我正在将ul上的tabIndex属性设置为0，这将给出ul“焦点”。我还向ul添加了一个onBlur事件，触发隐藏ul的状态更改（dropdown Expanded=false）。但是，当我实现此修复程序时，我在每个li元素上拥有的onclick事件将无法触发。我知道这
如何在运行后停止tkinter？

问题内容：我在停止“供稿”时遇到问题；cancel参数似乎对after方法没有任何影响。尽管“进纸停止”已打印到控制台。我尝试使用一个按钮将启动供稿，而另一个按钮将停止供稿。随着输出：问题答案：问题是，即使你打电话与停止循环，已经有等待消防挂起的工作。按下停止按钮不会触发新的作业，但是旧的作业仍然存在，并且当它自己调用时，它将传入False，这将导致循环继续。您需要取消待处理的作业，以
如何防止在单击子锚定时触发父级的onclick事件？

问题内容：我目前正在使用jQuery使div可点击，在这个div中我也有锚点。我遇到的问题是，当我单击某个锚点时，两个单击事件都已触发（对于div和锚点）。如何在单击锚点时防止div的onclick事件触发？这是损坏的代码： JavaScript 的HTML 问题答案：事件冒泡到DOM中已附加单击事件的最高点。因此，在您的示例中，即使div中没有其他可显式单击的元素，div的每个子元素也

在onclick事件发生后，我如何停止CSS面板相互坐在一起？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档