0

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>
1
  • 3
    Please show your code effort.
    – Mukul Kant
    Apr 13, 2015 at 6:03

1 Answer 1

0

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.

10
  • Yes it's work, but when load it from ajax that not work.
    – Nhân Cổ
    Apr 15, 2015 at 7:52
  • Did the above fix the Hash Change ? What is not Working exactly ? Did you forget to remove preventDefault() ? Apr 15, 2015 at 8:28
  • Do you mind posting your JavaScript where the Ajax request is made for the tabs ? Apr 15, 2015 at 8:30
  • Nothing special man, i used jQuery.load(); to do get a HTML content. In the content that have a tabs.
    – Nhân Cổ
    Apr 15, 2015 at 8:59
  • See updated answer. I added an small demo. It should work fine just make sure to change the ajax URLS with yours and include jQuery and ZURB foundation 5 assets properly Apr 15, 2015 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.