Question

你好我的javascript代码不工作我包含了css和代码中的脚本我没有javascript的良好经验也许有些东西缺少我需要一些帮助在这里感谢提前

  <html>

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
  "use strict";

  $("button").click(function () {
    $(".popup").fadeIn();
  });

  $("span").click(function () {
    $(".popup").fadeOut()
  });


});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
  <div class="overlay"> sheko </div>
  <div class="box">
      <span>X</span>
  <div>
</div>

</body>
<head>

<style>
.popup{
   z-index: 999;
  display: none;
}
.overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.90);
  position: absolute;
  top: 0;
  left: 0;
}
.box{
  width: 250px;
  height: 100px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box span{
  float: right;
  margin: 10px;
  cursor: pointer;
}

</style>

</head>

</html>

Answer 1

HTML的顺序完全不正确，<head></head>下面有<body></body>标记。

将head标签放在正文上方，就在打开html标签之后，然后将css和链接移动到本节中的jQuery。

最后，当浏览器从上到下读取dom时，最好在页面底部添加JS，这样会增加页面加载的速度。

  <html>

<head>

<style>
.popup{
   z-index: 999;
  display: none;
}
.overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.90);
  position: absolute;
  top: 0;
  left: 0;
}
.box{
  width: 250px;
  height: 100px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box span{
  float: right;
  margin: 10px;
  cursor: pointer;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>

<body>

<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
  <div class="overlay"> sheko </div>
  <div class="box">
      <span>X</span>
  <div>
</div>

<script type='text/javascript'>
$(function() {
  "use strict";

  $("button").click(function () {
    $(".popup").fadeIn();
  });

  $("span").click(function () {
    $(".popup").fadeOut()
  });


});
</script>

</body>

Answer 2

您有多处错误。

首先，<style></style>代码中的css必须位于您网页的<head></head>。

最佳解决方案是使用外部css文件，并在<link>中添加<head>。

之后，<script>部分在页面底部非常好，因为浏览器按照代码的顺序进行编译。

如果你想在html之前添加<script>，请在此函数中添加脚本：

$(document).ready(function(){
   // Here
});

Answer 3

将jS代码写入.js文件并使用

<script src="foo/bar/yourScript.js"></script>

.css中的样式表并使用

<link rel="stylesheet" href="css/bar/yourStyle.css">

所以Script-tag始终位于body-element的底部头部在身体上方，头部内部的链接标签

Answer 4

这是建议请保持代码流程。在body标签完成后，在head标签和jquery或JavaScript中编写css Style。

Here is jsfiddle link

https://jsfiddle.net/nbcakhzz/2/

Hope it will help you.

Answer 5

已经开始工作了。

＆＃13;

<html>
<head>
<style>
.popup{
   z-index: 999;
  display: none;
}
.overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.90);
  position: absolute;
  top: 0;
  left: 0;
}
.box{
  width: 250px;
  height: 100px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box span{
  float: right;
  margin: 10px;
  cursor: pointer;
}

</style>
  </head>
  
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
  "use strict";

  $("button").click(function () {
    $(".popup").fadeIn();
  });

  $("span").click(function () {
    $(".popup").fadeOut()
  });


});
  
</script>
  

<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
  <div class="overlay"> sheko </div>
  <div class="box">
      <span>X</span>
  <div>
</div>

</body>





</html>

＆＃13;

java脚本代码notworking

5 个答案: