Zurb Foundation 5选项卡不起作用

Question

我使用ZURB Foundation 5的标签。 当我单击选项卡时，URL中的哈希值已更改。

我想避免这种现象，因为我使用哈希来处理页面加载。

我试图使用preventDefault但什么也没发生。

有人知道如何实现这一目标吗？

第二次尝试确实有效。 但不适用于从Ajax加载的内容

这是我的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>

这是我的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;

}

这是我的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

来自文档

深层链接将深层链接设置为true，以启用对内容部分的深层链接。 深度链接允许访问者访问带有哈希的预定义URL，该哈希指向内容的特定部分。 深度链接还需要在哈希应该指向的内容部分上匹配数据段，而没有井号（＃）。

因此，如果您要禁用哈希更改，则可以尝试将其设置为false并删除选项卡的data-slug 。

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

我以前没有使用过粉底，但这可能会有所帮助。

编辑

正确包含您的基金会依赖项

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

现在尝试一下，将选项卡部分留空，并添加一个事件以通过AJAX加载内容，然后调用

的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

    $(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');
        });
    });
});

有关$(document).foundation('reflow');更多信息，请参见DOCS $(document).foundation('reflow'); 在AJAX完成并成功后调用此函数很有用。

如果默认情况下第一个选项卡处于活动状态，则您可能希望通过DOM准备就绪的AJAX加载内容，或手动为此选项卡添加内容。 我尝试了这一点，并正常工作。

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