首頁 > 網際網路

後台側邊導航欄如何用js動態生成

2019-12-13 20:01:57

在一些後台管理頁面上,我們的側邊導航欄資料很多都是動態生成的,都是動態的資料,即是說後台的導航欄很大可能不是固定的,是可以根據資料庫的資料來生成動態的導航欄的,下面我們來看一下如何用js動態生成。

1

假設這裡的陣列資料,是我們在php後台從資料裡取出來的。


2

得到資料後,把資料在頁面上輸出到js變數裡。


3

在前端頁面,js的變數得到的資料是如圖的一個陣列資料的。


4

在js裡對這個陣列資料進行操作,輸出成導航欄就行了,迴圈這個陣列。


5

在迴圈裡,對陣列內容生成html標籤。


6

最後對生成的html字串,使用jquery語法,寫到導航欄的容器div上。


7

html裡有這個對應的導航欄容器div的。


8

最後使用css美觀一下,就可以動態生成一個漂亮的導航欄了。



IT145.com E-mail:sddin#qq.com