JavaScript文件不適用於HTML

Question

我正在嘗試使用此處顯示的“變壓器選項卡” 。

我的代碼如下：

<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和不使用jquery，並將腳本手動插入頭部和主體末端。 JS和CSS文件完全從工作示例中復制而來。 我的瀏覽器已啟用javascript。 該腳本文件肯定已上載到服務器。 盡管我懷疑這個問題可能有些愚蠢，但我在這里感到非常困惑。

Answer 1

問題出在您的css文件中，請正確檢查示例鏈接，它們使用的不是正常的css，其scss。 因此，您首先需要將scss文件編譯為css，然后才能使用它。

如何在HTML中包含SCSS文件

您可以從此鏈接獲取幫助

Answer 2

將以下內容添加到您的代碼中。 這是從您提供的鏈接中獲得的。

<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 3

將您的javascript包含語句放在頁面底部（不在標題中），或將javascript放在文檔就緒語句中。 盡早加載和運行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>

JavaScript文件不適用於HTML

問題描述

3 個解決方案

解決方案1
3 已采納 2015-08-13 18:40:45

解決方案2
0 2015-08-13 18:14:52

解決方案3
0 2015-08-13 18:17:33

JavaScript文件不適用於HTML

問題描述

3 個解決方案

解決方案1 3 已采納 2015-08-13 18:40:45

解決方案2 0 2015-08-13 18:14:52

解決方案3 0 2015-08-13 18:17:33

解決方案1
3 已采納 2015-08-13 18:40:45

解決方案2
0 2015-08-13 18:14:52

解決方案3
0 2015-08-13 18:17:33