Question

<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>

我这里只包含了涉及与javascript链接的HTML部分。 javascript位于名为“js”的文件夹中，该文件夹与HTML文档位于同一文件夹中。我已尝试使用和不使用引号，因为当我在引号中引用图像或链接时，我的HTML通常不起作用 - 尽管大多数在线教程似乎都说必须使用引号。

如果你必须仔细阅读，那么这是其余的代码：

function main() {
  $(‘.main’).hide();
  $(‘.main’).fadeIn(1000);
}

$(document).ready(main);
$(‘.main’);

* {
  margin: 0;
  padding: 0;
}

#backs {
  background: white;
}

#gecko {
  content: url (“http: //www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png”);
  height: 128px;
  width: 128px;
  position: relative;
  float: left;
  margin-left: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
}

li {
  display: inline;
  padding-left: 50px;
  min-width: 100%
}

.navigation {
  color: black;
  letter-spacing: 2px;
  float: right;
  vertical-align: top;
  width: 800px;
  height: 70px;
  margin-top: 47px;
  min-width: 800px;
  padding-left: 150px;
  position: absolute;
}

.main {
  color: white;
  font-size: 100px;
  position: relative;
  top: 150px;
  background-image: url(http://soupbelly.com/wp-content/uploads/2011/11/DSC_0034.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 100%;
  height: 900px;
  padding-top: 90px;
  text-transform: uppercase;
}

* {
  margin: 0;
  padding: 0;
}

#backs {
  background: white;
}

#gecko {
  content: url (“http: //www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png”);
  height: 128px;
  width: 128px;
  position: relative;
  float: left;
  margin-left: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
}

li {
  display: inline;
  padding-left: 50px;
  min-width: 100%
}

.navigation {
  color: black;
  letter-spacing: 2px;
  float: right;
  vertical-align: top;
  width: 800px;
  height: 70px;
  margin-top: 47px;
  min-width: 800px;
  padding-left: 150px;
  position: absolute;
}

.main {
  color: white;
  font-size: 100px;
  position: relative;
  top: 150px;
  background-image: url(http://soupbelly.com/wp-content/uploads/2011/11/DSC_0034.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 100%;
  height: 900px;
  padding-top: 90px;
  text-transform: uppercase;
}

<!DOCTYPE html>
<html>

<head>
  <link rel=stylesheet href=Father.css>
  <title> Very Important Company </title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
</head>

<body>
  <div id=backs </div>
    <div class=header>
      <p>
        <img src=http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id=g ecko>
      </p>
      <div class=navigation>
        <ul>
          <li> SHOP </li>
          <li> ABOUT US </li>
          <li> RENTALS </li>
          <li> CONTACT </li>
          <li> PARTIES </li>
        </ul>

      </div>
    </div>
    <p>

Answer 1

为什么你只注意到脚本无效。你的时尚潮湿甚至工作吗？样式表链接中缺少的“”可能是您的脚本不起作用的原因

应该是

<link rel="stylesheet" href="style.css" type="text/css">

记住引号

注意到您的脚本中的引用不正确。使用这些

$('.class') or $(".class")

我只是希望你在你的html中以正常的方式编写你的代码，把引号放在他们需要的位置，而且没有你用过的地方

.main

在你的HTML代码中

Answer 2

您需要做的是将'./'附加到脚本src标记。

所以你的最终文件应该是这样的。

<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>

这样做会通知您的HTML代码在当前目录中查找“js”文件夹。

HTML和Javascript不会链接

2 个答案: