ZURB Foundation 5 のタブを使用しています。タブをクリックすると、URL のハッシュが変更されます。
ハッシュを使用してページの読み込みを処理しているため、この動作を防止したいと考えています。
使おうとしましpreventDefaultたが、何も起こりませんでした。
これを達成する方法を知っている人はいますか？
2回目の試行は本当にうまくいきます。ただし、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>