前端菜單點擊切換樣式，菜單控制iframe

本來想用jquery.load實現靜態刷新頁面的，但是可能會面臨一堆問題，倒不如去單獨做每個頁面舒服，然后決定采用iframe，jquery.load都寫了好了。。

點擊菜單切換樣式是因為，自己只找到了前端的模板，所以只能自己去做整體頁面和菜單了

原理就是 去除所有li的active樣式，獲取點擊的li，添加active，在寫的過程中發現總是不好用，仔細獲取了一下，點擊的對象

  $("li.nav-item").click(function(){
      $("li.nav-item").removeClass("active");
      $(this).addClass('active');      // 添加當前元素的樣式
  })

開始var cotrs = $(".nav-item li"); 寫成這樣子的時候不起作用，想來是寫反了，只怪當時並沒有注意，所以不起作用的主要原因應該就是獲取的對象不對。

具體實現邏輯還要看菜單的樣式怎么的。

 

再說iframe

<iframe id="mainContent" src=""  name="my_iframe" height="550" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" overflow-x="hidden" border="0" security="restricted" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>

上面這段代碼可以讓iframe看起來好看一點

菜單控制iframe，只需要超鏈接加target

<a id="toCalendar" class="nav-link" href="fullCalendar" target="my_iframe">

總的來說其實挺簡單的，我是因為做后台的，前端半吊子水平，一般都是直接用的前端框架，很多東西自己根本沒去研究過，也費了不少功夫

最后放一張圖