JavaScript 文件不适用于 HTML

Question

我正在尝试使用显示的 "Transformer Tabs" here.

我的代码如下：

<head>

    <link href="tabs.css" rel="stylesheet" >
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="tabs.js"></script>

</head>

<body>
    <div class="tabs">

      <nav role='navigation' class="transformer-tabs">
        <ul>
          <li><a href="#tab-1">Important Tab</a></li>
          <li><a href="#tab-2" class="active">Smurfvision</a></li>
          <li><a href="#tab-3">Monster Truck Rally</a></li>
          <li><a href="http://google.com">Go To Google &rarr;</a></li>
        </ul>
      </nav>

      <div id="tab-1">
        <h2>Tab 1</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum non iure magnam dolores earum nemo quo tempora ab unde! Nesciunt ea iste impedit suscipit cupiditate quam earum explicabo quas veniam doloribus sed aut aliquam repellendus deleniti laudantium molestias fuga nihil quidem voluptatum atque sapiente perferendis facilis. Tempora mollitia odio?
      </div>

      <div id="tab-2" class="active">
        <h2>Tab 2</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur est natus esse minima nihil quidem tenetur alias pariatur. Obcaecati repudiandae temporibus provident sapiente iure doloribus praesentium voluptates dolores quia eos velit fugit cum ipsam. Deleniti fugiat maxime vel tempore illum esse illo fugit quam recusandae aut aperiam omnis at quaerat!
      </div>

      <div id="tab-3">
        <h2>Tab 3</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores numquam cupiditate aliquam quisquam repellendus fugit eaque asperiores voluptatem ut accusamus soluta corporis in facere quae provident itaque magni eum repellat ducimus dolore. Beatae aperiam accusamus at voluptatem ad sunt mollitia perspiciatis tempora numquam rerum aliquam deserunt illum necessitatibus nisi omnis.
      </div>

      <div id="tab-4">
        <h2>Tab 4</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis impedit ut culpa quaerat error pariatur voluptatum sapiente alias quasi itaque voluptas expedita necessitatibus odio dolorem totam veniam quisquam nulla vero placeat corporis cupiditate assumenda amet inventore mollitia quidem similique laudantium maxime aperiam ea reprehenderit iusto a ad tempora harum.
      </div>

    </div>

</body>

"tabs.css"和"tabs.js"在同一个目录下。虽然应用了 "tabs.css"，但没有应用 "tabs.js"，结果只是一个没有标签的线性页面。

我试过使用和不使用 jquery，并手动将脚本插入到正文的头部和末尾。 JS 和 CSS 文件是从工作示例中完全复制的。我的浏览器启用了 javascript。脚本文件肯定是上传到服务器的。我在这里非常难过，尽管我怀疑这个问题可能很愚蠢。

Answer 1

将以下内容添加到您的代码中。这是来自您提供的link。

<script>
    $(document).ready(function(){
        var Tabs = {
            init: function () {
                this.bindUIfunctions();
                this.pageLoadCorrectTab();
            },

            bindUIfunctions: function () {
                // Delegation
                $(document)
                    .on("click", ".transformer-tabs a[href^='#']:not('.active')", function (event) {
                    Tabs.changeTab(this.hash);
                    event.preventDefault();
                })
                    .on("click", ".transformer-tabs a.active", function (event) {
                    Tabs.toggleMobileMenu(event, this);
                    event.preventDefault();
                });
            },

            changeTab: function (hash) {
                var anchor = $("[href=" + hash + "]");
                var div = $(hash);

                // activate correct anchor (visually)
                anchor.addClass("active").parent().siblings().find("a").removeClass("active");

                // activate correct div (visually)
                div.addClass("active").siblings().removeClass("active");

                // update URL, no history addition
                // You'd have this active in a real situation, but it causes issues in an <iframe> (like here on CodePen) in Firefox. So commenting out.
                // window.history.replaceState("", "", hash);

                // Close menu, in case mobile
                anchor.closest("ul").removeClass("open");
            },

            // If the page has a hash on load, go to that tab
            pageLoadCorrectTab: function () {
                this.changeTab(document.location.hash);
            },

            toggleMobileMenu: function (event, el) {
                $(el).closest("ul").toggleClass("open");
            }
        }

        Tabs.init();
    });
</script>

Answer 2

将您的 javascript 包含语句放在页面底部（而不是 header 中）或将 javascript 放在 document ready 语句中。加载和运行您的 javascript 早期导致 jquery 尝试将选项卡功能绑定到任何内容（因为 html 标记尚未加载）。

像这样

<head>
  <link href="tabs.css" rel="stylesheet" >
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
  // Tab stuff here
  <script src="tabs.js"></script> // this essentially does what $(document).ready(function ...) does
</body>

Answer 3

这里的问题出在你的css文件上，正确检查示例link，它不正常css他们使用过，它的scss。所以你首先需要将你的scss文件编译成css然后你就可以使用它了。

How to include SCSS file in HTML

你可以从中得到帮助link

JavaScript 文件不适用于 HTML

JavaScript file not applying to HTML

html

javascript

jquery

tabs