JavaScript 文件不适用于 HTML答案

【问题标题】：JavaScript file not applying to HTMLJavaScript 文件不适用于 HTML
【发布时间】：2015-11-06 20:14:01
【问题描述】：

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

我的代码如下：

<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。脚本文件肯定是上传到服务器的。尽管我怀疑这个问题可能很愚蠢，但我在这里非常难过。

【问题讨论】：

您检查控制台是否有错误？是否需要在javascript中调用函数来触发功能？
嗯，你是用jQuery来启动插件的吗？ Tabs.init();
像这里显示的那样？ codepen.io/chriscoyier/pen/gHnGD
我对 JS 很陌生，所以我不知道该怎么做。至于函数调用我不确定，我只是复制了工作示例中的代码。
致 Rejith，是的，它包含在“tabs.js”文件的底部

标签： javascript jquery html tabs

【解决方案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>

【讨论】：

嗨 Rejith，很遗憾我已经尝试将脚本作为内联代码添加。
是的。我也试过直接复制这段代码，但没有运气。

【解决方案2】：

将您的 javascript 包含语句放在页面底部（而不是在标题中）或将 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>

【讨论】：

你能把代码贴在 tabs.js 里吗？要检查 Chrome 上的控制台，read this。发布您遇到的错误（如果有）
嗨，安迪，不幸的是，问题出在其他问题上（请参阅已接受的答案）。不过，感谢您向我展示了如何使用控制台，这将在未来派上用场。
是的，我在发布答案之前就发现了这个错误。我从 codepen 网站上删除了所有的 javascript，并且预览没有改变。然后我意识到，他们使用的是 scss。

【解决方案3】：

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

How to include SCSS file in HTML

您可以从此链接获取帮助

【讨论】：

非常感谢！不知何故，直到现在我才听说过 SCSS，我得做一些研究。
如果您不想浪费时间，您可以直接从您的示例链接本身获取编译后的 css 文件...不客气！乐于助人:)
另外我想指出，您加载的当前 jquery 库会给您控制台错误。加载google cdn src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"