Question

我正在尝试使用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

这里的问题是你的css文件，正确检查示例链接，它们使用的不是正常的css，它的scss。因此，您首先需要将scss文件编译为css，然后才能使用它。

How to include SCSS file in HTML

您可以从此链接获取帮助

Answer 2

将以下内容添加到您的代码中。这来自您提供的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 3

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

JavaScript文件未应用于HTML

3 个答案: