js點(diǎn)擊列表文字對(duì)應(yīng)該行顯示背景顏色的實(shí)現(xiàn)代碼
本文實(shí)例講述了js點(diǎn)擊列表文字,實(shí)現(xiàn)該行文字顯示背景顏色的方法。分享給大家供大家參考。具體如下:
JS控制li,鼠標(biāo)點(diǎn)擊時(shí)class自動(dòng)加上,給列表文字產(chǎn)生自己喜歡的背景色的網(wǎng)頁(yè)特效。
運(yùn)行效果圖如下:
<style type="text/css"> li{cursor:pointer;} .cur{background:red;} </style> <script type="text/javascript"> window.onload = function () { var aLi = document.getElementsByTagName("li"); var i = 0; for (i = 0; i < aLi.length; i++) { aLi[i].onclick = function () { for (i = 0; i < aLi.length; i++) aLi[i].className = ""; this.className = "cur"; }; } }; </script> <div class="clMenu"> <ul> <li>1</li> <li>2</li> <li>4</li> <li>5</li> </ul> </div>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js設(shè)置文字顏色的方法示例
- 神奇!js+CSS+DIV實(shí)現(xiàn)文字顏色漸變效果
- JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
- JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁(yè)文字顏色的方法
- javascript自動(dòng)改變文字大小和顏色的效果的小例子
- JS Range HTML文檔/文字內(nèi)容選中、庫(kù)及應(yīng)用介紹
- javascript結(jié)合html5 canvas實(shí)現(xiàn)(可調(diào)畫筆顏色/粗細(xì)/橡皮)的涂鴉板
- RGB顏色值轉(zhuǎn)HTML十六進(jìn)制(HEX)代碼的JS函數(shù)
- 淺析js 文字滾動(dòng)效果
- JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法
- Js 打字效果 逐一出現(xiàn)的文字
- JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法
相關(guān)文章
JavaScript中Function函數(shù)與Object對(duì)象的關(guān)系
這篇文章主要介紹了JavaScript中Function函數(shù)與Object對(duì)象的關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-12-12基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Navigator?sendBeacon頁(yè)面關(guān)閉也能發(fā)送請(qǐng)求方法示例
這篇文章主要為大家介紹了Navigator?sendBeacon頁(yè)面關(guān)閉也能發(fā)送請(qǐng)求的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06javascript運(yùn)動(dòng)效果實(shí)例總結(jié)(放大縮小、滑動(dòng)淡入、滾動(dòng))
這篇文章主要介紹了javascript運(yùn)動(dòng)效果,結(jié)合實(shí)例形式總結(jié)分析JavaScript實(shí)現(xiàn)放大縮小、滑動(dòng)淡入、滾動(dòng)等效果的方法,需要的朋友可以參考下2016-01-01《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用實(shí)例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中鏈?zhǔn)秸{(diào)用的原理與簡(jiǎn)單使用技巧,需要的朋友可以參考下2020-04-04一個(gè)檢測(cè)表單數(shù)據(jù)的JavaScript實(shí)例
這篇文章主要介紹了一個(gè)檢測(cè)表單數(shù)據(jù)的JavaScript實(shí)例,很簡(jiǎn)單,很實(shí)用,比較適合初學(xué)者2014-10-10