Question

任何人都可以帮我吗？我添加了一个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文件并使用主页链接到主页

Answer 1

您需要将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();
    });
});

请注意，您将功能包装到加载的处理程序中。

点击按钮隐藏不起作用

1 个答案: