Zurb Foundation 5 вкладок не работает

Я использую вкладки ZURB Foundation 5. Когда я нажимаю на вкладку, изменяется хэш в URL-адресе.Zurb Foundation 5 вкладок не работает

Я хотел бы предотвратить это поведение, потому что я использую хэш для обработки загрузки страницы.

Я пытался использовать 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>

источник

2015-04-13 Nhân Cổ

Пожалуйста, покажите свое усилие кода. –

спасибо обновленный код –

От Docs

Глубокое связывание Устанавливает глубокую привязку к истине, чтобы обеспечить глубокую привязку к разделам содержимого. Глубокая привязка позволяет посетителям посещать предопределенный URL-адрес с хешем, который указывает на конкретный раздел содержимого. Глубокая привязка также требует сопоставления данных в разделе содержимого, на которое указывает хеш, без знака фунта (#).

Так что, если вы имеете в виду вы хотите отключить изменение хэша вы можете захотеть, чтобы попытаться установить его в ложное и удалить 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'); 
     }); 
    }); 
});

См. DOCS для получения дополнительной информации о $(document).foundation('reflow');. Полезно вызвать эту функцию после завершения и успешного завершения AJAX.

Если ваша первая вкладка активна по умолчанию, вы можете загрузить контент через AJAX в DOM ready или добавить содержимое вручную для этой вкладки. Я пробовал это на своем конце и прекрасно работал.

источник

2015-04-13 02:19:43

Да это работа, но когда загрузите его из ajax, который не работает. –

Вышеупомянутое исправление изменения хэша? Что не работает точно? Вы забыли удалить preventDefault()? –

Не могли бы вы разместили свой JavaScript, где Ajax-запрос сделан для вкладок? –

Zurb Foundation 5 вкладок не работает

ответ

Смежные вопросы