I am working on a function that allows users to access the content of a tab without causing the page to reload.
Initially, I tried using something like
$( "#tab1" ).click(function() {
$("#content").load("tab1.html #content > *");
});
but unfortunately, it didn't work as expected - the page still reloaded, leaving me confused.
If you want to check out the code, visit this Bootply link.
Can anyone help me identify where the issue might be?
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;
}