Question

我正在尝试在js中使用onclick代码和style.display来隐藏某些内容并进行潜水，默认情况下，该显示内容不会显示以获取阻止并显示。

第一个不会隐藏，另一个不会出现！

脚本文件运行良好，js中还有其他功能可以正常运行。

function showDiv() {
    document.getElementById('chatbutton').style.display = "none";
    document.getElementById('chatbox').style.display = "block";
  }

 <a href="" id="chatbutton" >
  <div class="mychat text-center" onclick="showDiv()">
      <p class="chattext">Chat Support</p>
  </div>
</a>

<div id="chatbox" class="mychat_open text-center d-none">
  <p class="chattext">Chat Support</p>
  <div class="form-group">
      <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
      <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
  </div>
</div>

.mychat_open{
   width: 15vw;
   height: 20vh;
   background-color: black;
   position: fixed;
   bottom: 20px;
   right: 20px;
   color: white;
   opacity: 0.8;
   min-height: 28px; 
}

Answer 1

您的JS工作正常，但是您在onclick标签中包含了<a href="">函数。您可以像这样#一样向其添加<a href="#">，也可以将其更改为其他类型的元素，例如<button>，以防止单击该页面时重新加载该页面。

您应该为要显示的元素切换“ d-none”类。

document.getElementById('chatbox').classList.remove('d-none')

Answer 2

如果目标是使聊天框最初处于隐藏状态，则可以将其显示样式属性设置为display:none。

<div id="chatbox" class="mychat_open text-center d-none" style="display:none">
    <p class="chattext">Chat Support</p>
    <div class="form-group">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
    </div>
</div>

这将隐藏聊天框，直到用户单击按钮。之所以有效，是因为js将ID为'chatbox'的元素的style.display属性更改为block。

Answer 3

我在链接中添加了return false以防止页面重新加载

添加了一个样式规则，实际上实际上是最初隐藏了该框，因此我们可以显示它：）

（添加了p以便在视觉上显示它是另一个显示的框，而不是打h。）

function showDiv() {
  document.getElementById('chatbutton').style.display = "none";
  document.getElementById('chatbox').style.display = "block";
}

<html>
<body>
  <a href="" id="chatbutton">
      <div class="mychat text-center" onclick="showDiv(); return false;">
          <p class="chattext">Chat Support</p>
      </div>
  </a>

  <div id="chatbox" class="mychat_open text-center d-none" style="display: none;">
      <p class="chattext">Chat Support Box</p>
      <div class="form-group">
          <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
          <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
      </div>
  </div>
</body>
</html>

Answer 4

亲爱的，可能会对您有帮助

取消字符串并添加按钮，如

<button onclick="myFunction()">Chat Support</button>

添加具有ID聊天框样式的div，不显示任何内容，

 <div id="chatbox" class="mychat_open text-center d-none" style=" display: none">

然后添加Java

function myFunction() {
  var x = document.getElementById("chatbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";

} }

您这样的完整格式

    <button onclick="myFunction()">Chat Support</button>
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
<p class="chattext">Chat Support</p>
<div class="form-group">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>

<script>
function myFunction() {
  var x = document.getElementById("chatbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
 }

}

可能会找到更多详细信息

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

使onclick无法显示并阻止的问题

4 个答案: