Home > Web Front-end > JS Tutorial > js click list text corresponding to the row display background color implementation code_javascript skills

js click list text corresponding to the row display background color implementation code_javascript skills

WBOY
Release: 2016-05-16 15:47:00
Original
1172 people have browsed it

The example in this article describes how to use js to click on list text and realize the background color of the line of text. Share it with everyone for your reference. The details are as follows:
JS controls li, the class is automatically added when the mouse is clicked, and the web page special effects of your favorite background color are generated for the list text.

The operation effect diagram is as follows:

<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>
Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template