1. 程式人生 > >後臺管理系統導航欄總結

後臺管理系統導航欄總結

一般後臺的管理介面結構如下:

頂部+左側導航+內容區域+底部

 主要實現以下功能:

  1. 頂部導航模組新增class效果,給點選的元素新增背景顏色同時改變寬度,其他元素移除樣式
  2. 點選頂部導航顯示對應的左側導航;
  3. 左側導航的伸展收縮,同時改變圖示的方向
  4. 隱藏/顯示導航,同時更改文字內容

知識點:

1.$().addClass()    $().removeClass()

2.使用index()獲取元素的索引值,然後使用eq(index)獲取對應的左側導航,更改css樣式的display屬性,然後通過siblings改變其他同級同胞的元素樣式

3.收縮效果:$().slideToggle('fast');再點選需要新增判斷條件,false == $().is(':visible')

改變圖示的方向,因為圖示來自font-awesome,直接更改了class

4.if判斷,通過$().css('display',none'')更改樣式

具體的可見歷史內容