HTML页面导航栏页脚不动，变换中间部分

代码段一：

 1 <script>
 2 $(document).ready(function() {
 3 $("#teachingObjectives").click(function() {
 4 //jiaoxuemubiao是a标签的ID,
 5 //ajaxHtml是需要更新的div标签ID,2.html是更新的内容
 6 //<a></a>标签实现这个效果，需要设置href="#".
 7 $("#ajaxHtml").load("teachingObjectives.html");
 8 $("#nav-index").removeClass("active");
 9 $("#nav-teachingObjectives").addClass("active");
10 $("#nav-teachingResources").removeClass("active");
11 $("#nav-laboratoryLayout").removeClass("active");
12 $("#nav-about").removeClass("active");
13 $("#nav-laboratoryConstruction").removeClass("active");
14 $("#nav-friendshipLink").removeClass("active");
15 $("#nav-contactUs").removeClass("active");
16 });
17 });
18 </script>

代码段二：

<div class="navbar-collapse collapse" style="padding-left: 0px;">
<ul class="nav navbar-nav navbar-left" style="height: auto;">
<li id="nav-index" class="active" style="padding-right: 35px;padding-left: 15px;"><a id="index" href="index.html" style="color: #FFFFFF;display: block; auto;height: 30px;font-size: 18px;">网站首页</a></li>
<li id="nav-teachingObjectives" style="padding-right: 35px;padding-left: 15px;"><a id="teachingObjectives" href="#" style="color: #FFFFFF;display: block; auto;height: 30px;font-size: 18px;">教学目标</a></li>
</ul>
</div>

代码段三：

<div id="ajaxHtml"></div>

以上代码是经过测试通过的，由于保密时间原因，不能截图，望谅解。