Zurb Foundation 5 tabs doesn't work

Question

I use ZURB Foundation 5's tabs. When I click on a tab the hash in the URL is changed.

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.

Does anybody know how to achieve this?

Second try it's really work. But not work on loaded content from Ajax

this is my 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

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

<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. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. 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..

<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

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

See the DOCS for more information about $(document).foundation('reflow'); it is useful to call this function after your AJAX is completed and successful.

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. I tried this on my end and works fine.

Zurb Foundation 5 tabs doesn't work

Question

1 answers

solution1
0 2015-04-13 02:19:43

Zurb Foundation 5 tabs doesn't work

Question

1 answers

solution1 0 2015-04-13 02:19:43

solution1
0 2015-04-13 02:19:43