代碼段一：
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;width: 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;width: auto;height: 30px;font-size: 18px;">教學目標</a></li> </ul> </div>
代碼段三：
<div id="ajaxHtml"></div>
以上代碼是經過測試通過的，由於保密時間原因，不能截圖，望諒解。
<!--轉載注明出處-->