2021-05-12 14:32:11
如何使用CSS3和jquery方法控制無序列表間隔顯示
2019-12-12 01:56:47
一般情況下，無序列表前面的小圖示是一個實心圓，可以利用CSS3樣式屬性list-style-type控制圖示樣式；還可以使用jQuery方法控制無序列表專案的背景色間隔顯示，操作如下：
1
第一步，雙擊開啟HBuilderX編輯器，新建一個預設的HTML5頁面，如下圖所示：
2
第二步，在body標籤下方，插入一個div標籤和無序列表，設定多個子項，如下圖所示：
3
第三步，利用div ul元素選擇器，設定子項前顯示的圖示，使用list-style-type屬性，如下圖所示：
4
第四步，儲存程式碼並預覽介面顯示的效果，可以發現一個無序列表，子項前面是空心圓，如下圖所示：
5
第五步，引入jquery核心檔案，並在初始化函數內編寫程式碼，實現背景動態變化，如下圖所示：
6
第六步，結果發現背景是一項一項全部變化，而不是一項變化其他不變；新增siblings方法設定子項兄弟節點背景，如下圖所示：
相關文章