我正在尝试创建一个功能,让用户可以访问点击选项卡的内容而无需重新加载页面。
最初,我认为像
这样的东西$( "#tab1" ).click(function() {
$("#content").load("tab1.html #content > *");
});
工作正常,但它没有 - 页面仍在重新加载,因此让我感到难过。
有谁看到我的问题所在?
HTML:
<div class="custom-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="tab1" href="tab1.html">Tab1</a></li>
<li><a id="tab2" href="tab2.html">Tab2</a></li>
</ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
</div><!-- END: "container" -->
</div><!-- END: "container" -->
</div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->
<div class="container pad-container">
<div id="content">
<h1>Content</h1>
<p>stuff...</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
</div>
<div class="footer static-footer">
<div class="container">
</div><!-- END: "container" -->
</div><!-- END: "footer static-footer" -->
</div><!-- END: "container pad-container" -->
CSS:
html,
body {
height:100%;
font-family: 'Open Sans', sans-serif;
}
.custom-wrapper {
min-height:100%;
position:relative;
}
.pad-container{
padding-top:80px;
padding-bottom:80px; /*height of the footer plus a little */
}
.static-footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:50px; /* height of the footer */
background:#000000;
}
.static-footer .text-muted { /* text on left of footer */
color: #ffffff;
margin-top: 17px;
}
.static-footer .text-primary{
margin-top: -33px;
}
答案 0 :(得分:4)
取消默认点击事件:
$( "#tab1" ).click(function(e) {
e.preventDefault();
$("#content").load("tab1.html #content");
});