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

May 16, 2016 pm 03:47 PM
background color

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.

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to adjust background color settings in Eclipse How to adjust background color settings in Eclipse Jan 28, 2024 am 09:08 AM

How to set background color in Eclipse? Eclipse is a popular integrated development environment (IDE) among developers and can be used for development in a variety of programming languages. It is very powerful and flexible, and you can customize the appearance of the interface and editor through settings. This article will introduce how to set the background color in Eclipse and provide specific code examples. 1. Change the editor background color. Open Eclipse and enter the "Windows" menu. Select "Preferences". Navigate on the left

How to set the background color in editplus-How to set the background color in editplus How to set the background color in editplus-How to set the background color in editplus Mar 04, 2024 pm 07:00 PM

Friends, do you know how to set the background color in editplus? Today I will explain how to set the background color in editplus. If you are interested, come and take a look with me. I hope it can help you. Step 1: First open editplus, click Tools above, as shown in the picture: Step 2: In the tool menu, click preferences, as shown in the picture: Step 3: In the preferences page, click colors on the left, as shown in the picture: Chapter 3 Step 4: In the background position, select a color as needed, as shown in the figure:

Step-by-step guide to changing background color with Eclipse Step-by-step guide to changing background color with Eclipse Jan 28, 2024 am 08:28 AM

Teach you step by step how to change the background color in Eclipse, specific code examples are required Eclipse is a very popular integrated development environment (IDE) that is often used to write and debug Java projects. By default, the background color of Eclipse is white, but some users may wish to change the background color to suit their preference or to reduce eye strain. This article will teach you step by step how to change the background color in Eclipse and provide specific code examples. Step 1: Open Eclipse First

Detailed explanation of how to modify the background color of PyCharm Detailed explanation of how to modify the background color of PyCharm Jan 04, 2024 am 11:03 AM

PyCharm is a powerful Python integrated development environment (IDE) that provides developers with many convenient functions and tools. One of the commonly used functions is to modify the background color of PyCharm. In this article, I will introduce in detail the method of modifying the background color of PyCharm and provide specific code examples. To modify the background color of PyCharm, we need to perform the following steps: Step 1: Open PyCharm and click "Settin" under the "File" menu

Eclipse background color configuration guide Eclipse background color configuration guide Jan 28, 2024 am 10:44 AM

Eclipse background color setting tutorial Eclipse is a very popular integrated development environment (IDE) used to develop applications in various programming languages. It has rich features and flexible configuration options that can be customized to suit individual needs. One of the common personalization requirements is to change the background color of Eclipse. This article will show you in detail how to set the background color of Eclipse. We'll provide concrete code examples to help you achieve this quickly. Step 1: Beat

How to remove the background color of word? How to remove the background color of word How to remove the background color of word? How to remove the background color of word Mar 04, 2024 am 10:10 AM

Word is a word document processing tool developed by Microsoft Corporation. It provides rich document editing functions, including text input, table creation, format adjustment, etc. It can easily create and edit various types of documents, such as reports, resumes, and provides richer templates and graphics functions. Because we use Word for office work for a long time, inappropriate background color may cause visual fatigue and even affect the speed of office work, so there is a good way to learn how to remove the background color of Word. How to remove the background color of word? Method to remove the background color of word 1. Open the WORD document that needs to be operated and click the "Page Layout" tab in the toolbar. 2. Find and click "Page Color" and select "No Color". 3.

How to change the window background color in win7 How to change the window background color in win7 Dec 30, 2023 pm 12:31 PM

When we use the win7 system, we can manually set the window background color to get a better visual experience. If we set it to a protective color, it can also protect our eyesight, and the method is very simple. We only need to set it in the personalized advanced appearance settings. It can be set up, let’s learn it together. Win7 window background color setting tutorial 1. First enter the "Personalization" settings 2. Then select the "Window Color" setting 3. Click "Advanced Appearance Settings" below 4. Set the project to "Window" 5. Then click on the right "Color", select the desired color. 6. After the settings are completed and confirmed, you can see that the background color of our window has changed.

Personalize your Eclipse interface: Personalize the background color Personalize your Eclipse interface: Personalize the background color Jan 28, 2024 am 09:24 AM

Customize your Eclipse interface: Set background color Eclipse is a very popular Java integrated development environment (IDE) that provides rich functionality and plug-in support. When using Eclipse for development, a personalized interface can improve work efficiency and comfort. In this article, we will learn how to set the background color of Eclipse to suit personal preferences and needs. 1. Open Eclipse and enter the "Preferences" interface in Eclipse.

See all articles