Question

我正在Codepen上处理个人档案，将代码移至桌面文件时遇到了一些麻烦。 HTML和CSS完美运行。但是，当我将Javascript移到它自己的文件中时，它根本不起作用，或者有时只有第一位起作用。

以下Javascript用于的导航栏的HTML：

 <nav class="navbar navbar-expand-md navbar-dark bg-company-red fixed-top">
    <a class="navbar-brand" href="#intro">brezitski</a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#about">About <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#projects">Projects</a>
        <a class="nav-item nav-link" href="#contact-form">Contact</a>
      </div>
    </div>
  </nav>

JavaScript代码：

$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});

$(".navbar-nav a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

第一个函数只是添加了一个类，因此导航栏在滚动时可以获得不同的颜色。

第二个应该在单击移动资源上的锚点后隐藏导航栏。

在我的密码笔中它像魅力一样工作：https://codepen.io/Sarithan/pen/pOmxPy

这是我在

之前链接文件的方式

<!-- Bootstrap Required-->
  <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <!--Custom Scripts-->
  <script src="js/main.js"></script>

Answer 1

我认为最简单的方法是使用Codepen的“调试模式”，您可以在“更改视图”下找到该模式。然后“ ctrl + u”并将其保存到本地html文件中。

将Javascript从Codepen传输到main.js

1 个答案: