Zurb Foundation 5选项卡不起作用

Question

I use ZURB Foundation 5's tabs. 我使用ZURB Foundation 5的标签。 When I click on a tab the hash in the URL is changed. 当我单击选项卡时，URL中的哈希值已更改。

I would like to prevent this behaviour because I use hash to handle the page load. 我想避免这种现象，因为我使用哈希来处理页面加载。

I was trying to use preventDefault but nothing happened. 我试图使用preventDefault但什么也没发生。

Does anybody know how to achieve this? 有人知道如何实现这一目标吗？

Second try it's really work. 第二次尝试确实有效。 But not work on loaded content from Ajax 但不适用于从Ajax加载的内容

this is my index.html 这是我的index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cẩm nang Dịch Lý beta 2.0.0</title>
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body >

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <!-- <a class="left-off-canvas-toggle menu-icon" href="#">
          <span></span>
        </a> -->
        <a class="left-off-canvas-toggle icon-menu" href="#">
          <span></span>
        </a>

      </section>

      <section class="middle tab-bar-section">
        <h1 class="title ">titke</h1>
      </section>

    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><a href="#home"  >xxxx</a></li>
        <li><label></label></li>
        <li><a href="#solar">xxxx</a></li>
      </ul>
    </aside>



    <section class="main-section" >
      <!-- content goes here -->
          <div id="main"></div>
    </section>
  <a class="exit-off-canvas"></a>

  </div>
</div>


    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

    <script src="js/app.js"></script>
  </body>
</html>

This is my app.js 这是我的app.js

page_manager();
$(window).on('hashchange', function(event) {
    page = $(this).attr('href');
    page_manager(page);
});


$(document).foundation({
    offcanvas : {
    open_method: 'move', 
    close_on_click : true
    }
  });


function page_manager(page){
    var hash = window.location.hash;
    if(!page){
    var page = hash.split('/')[0];  
    }
    var input = hash.split('/')[1];

off_canvas();

switch(page) {
    case'':
    case'undefined':
    case'#home':    
    $( "#main" ).load( "pages/home.html", function() {
         page_home();
    });
        break;
    case '#solar':
   $( "#main" ).load( "pages/solar.html", function() {
        page_solar(input);
    }); 
        break;

}

And this is my solar.html 这是我的solar.html

<ul class="tabs" data-tab role="tablist">
  <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Chủ</a></li>
  <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Hỗ</a></li>
  <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Biến</a></li>
</ul>

<div class="tabs-content" data-section data-options="deep_linking: false">


  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
    <h2>First panel content goes here...</h2>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
    <h2>Second panel content goes here...</h2>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
    <h2>Third panel content goes here...</h2>
  </section>

</div>

Answer 1

From the Docs 来自文档

Deep Linking Set deep-linking to true to enable deep linking to sections of content. 深层链接将深层链接设置为true，以启用对内容部分的深层链接。 Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. 深度链接允许访问者访问带有哈希的预定义URL，该哈希指向内容的特定部分。 Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign. 深度链接还需要在哈希应该指向的内容部分上匹配数据段，而没有井号（＃）。

So if you mean you want to disable the hash change you may want to try to set it to false and remove the data-slug for the tabs.. 因此，如果您要禁用哈希更改，则可以尝试将其设置为false并删除选项卡的data-slug 。

<div data-section data-options="deep_linking: false">

I haven't used foundation before but this may help.. 我以前没有使用过粉底，但这可能会有所帮助。

Edit 编辑

Include properly your Foundation dependencies 正确包含您的基金会依赖项

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>

Now try this, leave your tab sections empty and add an event to load content via AJAX, then call 现在尝试一下，将选项卡部分留空，并添加一个事件以通过AJAX加载内容，然后调用

HTML 的HTML

<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational">
    <a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Chủ</a>
</li>
<li class="tab-title" role="presentational">
    <a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" controls="panel2-2">Hỗ</a>
</li>
<li class="tab-title" role="presentational">
    <a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Biến</a>
</li>

<div class="tabs-content" data-section data-options="deep_linking: false">
    <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1" data-options="deep_linking: false">
        <h2>Here perhaps add something because it is the active tab</h2>
    </section>
    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2" data-options="deep_linking: false">
    </section>
    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3" data-options="deep_linking: false">
    </section>
</div>

JavaScript 的JavaScript

    $(document).ready(function () {

    $(document).foundation(); // Init Foundation

    // When first Tab is clicked get AJAX content
    $("a[href='#panel2-1']").bind("click", function (e) {
        e.preventDefault();
        $("#panel2-1").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
            $(document).foundation('reflow'); // or $(document).foundation('tab', 'reflow');
        });
    });

    // Second anchor
    $("a[href='#panel2-2']").bind("click", function (e) {
        e.preventDefault();
        $("#panel2-2").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
            $(document).foundation('reflow');
        });
    });

   // and so on

    $("a[href='#panel2-3']").bind("click", function (e) {
         e.preventDefault();
        $("#panel2-3").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
            $(document).foundation('reflow');
        });
    });
});

See the DOCS for more information about $(document).foundation('reflow'); 有关$(document).foundation('reflow');更多信息，请参见DOCS $(document).foundation('reflow'); it is useful to call this function after your AJAX is completed and successful. 在AJAX完成并成功后调用此函数很有用。

If your first tab is active by default you may want to load the content via AJAX on DOM ready or add the content manually for this tab. 如果默认情况下第一个选项卡处于活动状态，则您可能希望通过DOM准备就绪的AJAX加载内容，或手动为此选项卡添加内容。 I tried this on my end and works fine. 我尝试了这一点，并正常工作。

Zurb Foundation 5选项卡不起作用

问题描述

1 个解决方案

解决方案1
0 2015-04-13 02:19:43

Zurb Foundation 5选项卡不起作用

问题描述

1 个解决方案

解决方案1 0 2015-04-13 02:19:43

解决方案1
0 2015-04-13 02:19:43