jquery - 访问选项卡时网站无法重新加载的问题

Question

我正在尝试创建一个功能，让用户无需重新加载页面即可访问点击选项卡的内容。

一开始我以为是这样的

$( "#tab1" ).click(function() {
    $("#content").load("tab1.html #content > *");
});

本来可以正常工作，但事实并非如此 - 页面仍然重新加载，因此让我感到困惑。

Bootply .

有人知道我的问题出在哪里吗？

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;
}

Answer 1

取消默认点击事件:

$( "#tab1" ).click(function(e) {
    e.preventDefault();
    $("#content").load("tab1.html #content");
});

http://api.jquery.com/event.preventDefault/