我使用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>
从文档
深度链接将深度链接设置为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。在AJAX完成并成功后调用此函数非常有用。
如果你的第一个选项卡默认是活动的，你可能想通过DOM上的AJAX加载内容，或者手动添加这个选项卡的内容。我试过了，效果很好。