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