为了账号安全,请及时绑定邮箱和手机立即绑定

在 html 中加载 .js 文件

在 html 中加载 .js 文件

繁星coding 2022-05-19 16:19:06
我想知道加载静态 .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
查看完整描述

1 回答

?
开满天机

TA贡献1786条经验 获得超13个赞

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


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


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

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


如果你想将 JS 直接嵌入到 HTML 中,那么你可以简单地这样做:


<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 中设置样式,但是没有任何代码可以查看我只能怀疑。


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


查看完整回答
反对 回复 2022-05-19
  • 1 回答
  • 0 关注
  • 129 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信