很喜歡一些特效，更喜歡一些企業站的導航點擊效果，但是無論自己怎麼使用點擊效果都是不怎麼理想，於是跟這個效果槓上了，最後透過學習JS相關的變幻效果，最後實現了企業站導覽列點選目錄名稱變換顏色的效果實例，以下來分享我的操作程式碼：
首先我先將我的最終效果展示讓大家瞧：
如上圖所示，我們需要實現的效果是當使用者點擊對應的導覽列的時候，我們可以讓對應的導覽列名稱變換顏色，以提醒使用者此刻所處的頁面。
在下面我就展示一下實作上述碰撞效果的Html和JS程式碼：
首先來展示前端的HTML程式碼：
然後讓我們來展示JS程式碼：
3.程式碼解析：
前端頁面：
類別名為location now的元素為變換後顏色的標籤。
JS程式碼：
decodeURI():可對 encodeURI() 函數編碼過的 URI 進行解碼。
location.pathname：瀏覽器網址列中得到的結果時的完整位址串。
location.search：得到的是URL路徑中?以及?之後的所有內容。
實例解析：
存取的URL路徑為：
#http://www.zywpro.com/Home/Index/about.html?id= 1&name=wdy&password=password
location.pathname得到的結果為：
http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.search得到的結果為：
?id=1&name=wdy&password=password
each():規定為每個符合元素規定運行的函數,傳回false 可用於及早停止循環。
實例：
輸出每個li 元素的文字：
attr():設定或傳回被選元素的屬性值。 attr(一個值的話為傳回被選元素的值，兩個值為設定被選元素的值)
addClass():向被選元素新增一個或多個類別。
removeClass():從被選元素移除一個或多個類別。
好了，這個簡單的點擊導航實現顏色變換的效果實現了，雖然看著很簡單，但是裡面涉及的前端知識也是不少，所以我們把每一件簡單的事情認真做，那麼當我們遇到再怎麼複雜的事情時，我們也能化複雜為簡單，而且我們也可以去更好更快地處理問題！繼續加油吧，PHP開發的小夥伴們！
以上是JS實作點選目錄名稱變換顏色的效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
