文章/答案/技术大牛

发布

社区首页 >问答首页 >基础6:如何使用jquery添加选项卡

问基础6:如何使用jquery添加选项卡
EN

Stack Overflow用户

提问于 2016-02-17 14:46:41

回答 1查看 2.1K关注 0票数 1

我试图用jquery在基金会中添加一个选项卡。查看我的演示代码：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>Tab Test</title>
      <link href="foundation-6/css/foundation.css" type="text/css" rel="stylesheet">
      <script src="jquery-2.2.0.js"></script>
      <script src="foundation-6/js/foundation.js"></script>
  </head>

  <body>
    <div class="row"><div class="large-12 columns"><button type="button" id="button1">Click Me!</button></div></div>
    <div class="row collapse">
      <div class="medium-3 columns">
        <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
          <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
          <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
          <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
          <li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
          <li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
          <li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
        </ul>
        </div>
        <div class="medium-9 columns">
        <div class="tabs-content vertical" data-tabs-content="example-vert-tabs" id="tab_content">
          <div class="tabs-panel is-active" id="panel1v">
            <p>Test1</p>
          </div>
          <div class="tabs-panel" id="panel2v">
            <p>Test2</p>
          </div>
          <div class="tabs-panel" id="panel3v">
            <p>Test3</p>
          </div>
          <div class="tabs-panel" id="panel4v">
            <p>Test4</p>
          </div>
          <div class="tabs-panel" id="panel5v">
            <p>Test5</p>
          </div>
          <div class="tabs-panel" id="panel6v">
            <p>Test6</p>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $(document).foundation();

        $("#button1").click(function() {
          $("#example-vert-tabs").append('<li class="tabs-title"><a href="#panel7v">Tab 7</a></li>');
          $("#tab_content").append('<div class="tabs-panel" id="panel7v"><p>Test7</p></div>');
          $(".tabs").foundation();
        });
      });
    </script>
  </body>
</html>

但是当我点击这个按钮时，我得到了以下警告：“尝试初始化已经有一个Foundation插件的元素的选项卡。”我不能点击新的标签。

当我单击时，我会得到以下错误：

7123TypeError: undefined is not an object (evaluating '$tabLink[0].hash')
_handleTabChangefoundation.js:7122
(anonymous function)foundation.js:7059
dispatchjquery-2.2.0.js:4731
handlejquery-2.2.0.js:4543

怎么啦？

tabs

zurb-foundation

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-17 12:15:05

代码中的基本问题是如何初始化选项卡实例。

在foundation 6中，为了创建选项卡(链接)的新实例，您应该在js代码中添加如下内容：

var elem = new Foundation.Tabs($('#example-vert-tabs'));

然后，每次进行更改、添加或删除选项卡时，都可以调用如下内容：

elem = new Foundation.Tabs($('#example-vert-tabs'));

我已经用您的代码创建了一个代码依赖示例，这样您就可以确切地看到发生了什么(http://codepen.io/MKallivokas/pen/xVgrYM)：

$(document).ready(function() {
    var elem = new Foundation.Tabs($('#example-vert-tabs'));

    $("#button1").click(function() {
          $("#example-vert-tabs").append(
            '<li class="tabs-title"><a href="#panel7v">Tab 7</a></li>'
          );
          $("#tab_content").append(
            '<div class="tabs-panel" id="panel7v"><p>Test7</p></div>'
          );

          elem = new Foundation.Tabs($('#example-vert-tabs'));
    });
});

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35459878

复制

相似问题

问基础6:如何使用jquery添加选项卡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基础6:如何使用jquery添加选项卡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基础6:如何使用jquery添加选项卡
EN