this - 教你如何操作本身元素
this
指的是觸發該事件的元素
所以,我們利用this
來指定觸發該事件的元素,並利用this
來做一些操作。
parent() - 找到父階層元素
利用parent()
語法,來找到父元素,並為父元素修改它的css樣式。
在以上的範例中,當按下a
連結按鈕,就利用parent
去找到它的外層父元素,也就是li
,故我們就可以直接為li
修改它的CSS樣式囉。
siblings() - 同層元素
利用語法siblings()
來找到同一層中的其他元素,並為它們修改CSS樣式
你可以看到以上範例的JS檔案中,在我們按下a
連結按鈕後,會先用parent()
去找它的父元素,也就是li
。
接著,找到父元素後,會接著執行toggleClass('active')
,再來,會執行sibilings()
,去找其他同層的li
,並執行removeClass
,
來消除它們的bg-warning text-white
的className。