js點(diǎn)擊列表文字對(duì)應(yīng)該行顯示背景顏色的實(shí)現(xiàn)代碼

更新時(shí)間：2015年08月05日 15:02:14 投稿：lijiao

這篇文章主要介紹了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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS生成隨機(jī)字符串的多種方法
這篇文章主要介紹了JS生成隨機(jī)字符串的方法,需要的朋友可以參考下
2014-06-06
javascript獲取文檔坐標(biāo)和視口坐標(biāo)
制作網(wǎng)頁(yè)的過(guò)程中，你有時(shí)候需要知道某個(gè)元素在網(wǎng)頁(yè)上的確切位置。下面的教程總結(jié)了Javascript在網(wǎng)頁(yè)定位方面的相關(guān)知識(shí)。有需要的小伙伴可以參考下。
2015-05-05
js實(shí)現(xiàn)Form欄顯示全格式時(shí)間時(shí)鐘效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)Form欄顯示全格式時(shí)間時(shí)鐘效果代碼,可讀取當(dāng)前的完整時(shí)間并實(shí)時(shí)顯示,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
JavaScript嚴(yán)格模式禁用With語(yǔ)句的原因
看了很多遍JavaScript嚴(yán)格模式，其中有說(shuō)“禁用With語(yǔ)句”今天禁不住想知道為何“嚴(yán)格模式”就容不下with語(yǔ)句呢，如果你也表示疑惑可以看看哦
2014-10-10
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
JS中多種方式創(chuàng)建對(duì)象詳解
下面小編就為大家?guī)?lái)一篇JS中多種方式創(chuàng)建對(duì)象詳解。小編覺(jué)得挺不錯(cuò)的?，F(xiàn)在分享給大家，給大家一個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-03-03
如何為你的JS項(xiàng)目添加智能提示與類(lèi)型檢查詳解
這篇文章主要給大家介紹了關(guān)于如何為你的JS項(xiàng)目添加智能提示與類(lèi)型檢查的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
uniapp實(shí)現(xiàn)app熱更新的方法
本文主要介紹了uniapp實(shí)現(xiàn)app熱更新的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
JavaScript 不支持 indexof 該如何解決
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。本文給大家介紹ie8 不支持 indexof 的解決方法
2016-03-03
BootStrap智能表單實(shí)戰(zhàn)系列(六)表單編輯頁(yè)面的數(shù)據(jù)綁定
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(六)表單編輯頁(yè)面的數(shù)據(jù)綁定的相關(guān)資料,一般用于編輯頁(yè)面，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06