按钮隐藏点击不起作用

Button hide on click is not working

本文关键字：不起作用 隐藏 按钮      更新时间：2023-09-26

谁能帮我一下?我添加了一个JS代码，使我的按钮在点击时不可见，下面的文本可见。它在js小提琴上工作，但当我把它上传到网上时，它不起作用…https://jsfiddle.net/kraftpanda/wdc7c2ue/

<button id="theButton" class="btn">Click to View Phone Number</button>
<div id="theDiv" style="display:none;"><p><h3>Call Us: + 91 96000 72298 / 044-65652298</p></div>
$("#theButton").click(function(){
    $("#theButton").hide();
    $("#theDiv").show();
})
    .btn {
  background: #d93470;
  background-image: -webkit-linear-gradient(top, #d93470, #b82b53);
  background-image: -moz-linear-gradient(top, #d93470, #b82b53);
  background-image: -ms-linear-gradient(top, #d93470, #b82b53);
  background-image: -o-linear-gradient(top, #d93470, #b82b53);
  background-image: linear-gradient(to bottom, #d93470, #b82b53);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

很抱歉没有提供更多的细节…网址是http://exitoautomation.com ..我将css添加到css文件中，将HTML添加到索引页面，将脚本添加到button.js文件中，并使用

将主页链接到它

你需要把你的Javascript代码包装成<script>标签，把你的css包装成<style>标签，像这样:

<button id="theButton" class="btn">Click to View Phone Number</button>
<div id="theDiv" style="display:none;"><p><h3>Call Us: + 91 96000 72298 / 044-65652298</p></div>
<script type="text/javascript">
$("#theButton").click(function(){
    $("#theButton").hide();
    $("#theDiv").show();
});
</script>
<style type="text/css">
    .btn {
  background: #d93470;
  background-image: -webkit-linear-gradient(top, #d93470, #b82b53);
  background-image: -moz-linear-gradient(top, #d93470, #b82b53);
  background-image: -ms-linear-gradient(top, #d93470, #b82b53);
  background-image: -o-linear-gradient(top, #d93470, #b82b53);
  background-image: linear-gradient(to bottom, #d93470, #b82b53);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
</style>

另外，确保您也有<html>, <head>和<body>标记，或者，简而言之，您的html是有效的。如果我是你，我会在youtube上看一个关于html的教程。几分钟后你就会得到很多帮助。如果在部署后它仍然不能工作，那么清除浏览器缓存，并在浏览器控制台的控制台和网络选项卡中查找错误。

编辑:问题是你的代码在按钮创建之前执行，当你向按钮添加处理程序时，它不存在。稍后，按钮将在没有处理程序的情况下创建。所以你可以这样修改JS:

$(function() {
    $("#theButton").click(function(){
        $("#theButton").hide();
        $("#theDiv").show();
    });
});
相关文章：