在 html 中加载 .js 文件

Question

我想知道加载静态 .js 文件的样子

使用<script src="{% static 'js/base.js' %}" />

可能需要 .js 因为我会像这里一样尝试使用这个 NavBar。 登录有红框。 https://youtu.be/LOWjWRy_Kks?t=384

我尝试从引导程序加载：

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

我没有电影里的红框

https://zapodaj.net/images/46600ed652872.jpg

Answer 1

我不能很清楚地理解你的问题，但我也不能发表评论。

如果静态 JS 是指计算机上的 JavaScript，那么您可以使用相对路径，即相对于 HTML 文件的路径。

<script src="./src/index.js></script>

./ 用于指示当前路径，../ 可用于向上移动目录或换言之返回。

如果你想直接在 HTML 中嵌入 JS，那么你可以简单地这样做：

<script>
//your js here
</script>

在视频中，他碰巧使用了 JQuery，它是一个 Javascript 库，您在包含 Bootstrap 时碰巧也导入了该库。

如果您按Ctrl + Shift + I或打开开发者控制台，您可以查看是否出现了 JavaScript 错误。 您没有看到红框的事实很可能与 CSS 而不是 JS 相关。

如果您可以使用时间戳更新视频，那就太好了，并且还包括一些您的代码和您正在尝试做的事情。

编辑：在评论中澄清后

这几乎可以肯定是 CSS 在起作用。 如果您从教程中复制了 CSS 文件。 您可以将以下 CSS 属性应用于元素，方法是使用nth-last-child()或为其指定一个类并为其设置样式。 以下将是您想要的视觉效果的示例。

.contact-button {
   padding: 20px;
   background: red; 
   color: white; 
   border-radius: 5px;
   transition: linear 1s;
}
.contact-button:hover {
   background: blue; 
}

但是，由于您使用的是引导程序，因此设置按钮样式非常容易。 只需将btn btn-danger添加到按钮的类中，瞧。

我怀疑按钮没有按预期方式显示的原因是因为它有一个不正确的类名，并且没有在 css 中设置样式，但是没有任何代码可以查看，我只能怀疑。

希望这能解决问题。 如果没有，也许添加代码？