Home > Developer > JavaScript
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> line-by-line color and mouse color effects </title> <meta http-equiv = "content-type" content = "text/html; charset = gb2312 "> <style type =" text/css ">. container ul {margin: 0; padding: 0 ;}. container li {cursor: pointer; height: 30px; width: 200px; background-color: # FFC; line-height: 30px; text-indent: 1em; font-size: 12px ;}. container. change {cursor: pointer; height: 30px; width: 200px; background-color: # C1F9CC; line-height: 30px; text-indent: 1em; font-size: 12px ;}. container. current {cursor: pointer; height: 30px; width: 200px; background-color: # F66; line-height: 30px; text-indent: 1em; font-size: 12px ;} </style> <script type = "text/javascript"> window. onload = function () {changeColor ('content'); changeColor ('content2'); // write the ul id to be controlled, to control a few items, control several changeColor ('content3');} function changeColor (id) {var arrayli = document. getElementById (id ). getElementsByTagName ('lil'); var bool = true; // the odd-number behavior is true var oldStyle; // Save the original style for (var I = 0; I </pead> <body> the first UL <ul id = "content"> <li> the barrier is discolored. </li> <li> the barrier is discolored, color over </li> <li> color over the barrier, color over the barrier </li> <li> color over the barrier, color over the barrier </li> <li> color over the barrier, color-changing </li> </ul> the second UL <ul id = "content2"> <li> color-changing </li> <li> color-changing, color over </li> <li> color over the barrier, color over the barrier </li> <li> color over the barrier, color over the barrier </li> <li> color over the barrier, color-changing </li> </ul> the third UL <ul id = "content3"> <li> color-changing </li> <li> color-changing, color over </li> <li> color over the barrier, color over the barrier </li> <li> color over the barrier, color over the barrier </li> <li> color over the barrier, color over </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
