Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Untitled Document</title>6 <style>7 Li{List-style:None;width:114px;Height:140px;background:URL (img/normal.png);float: Left;Margin-right:20px; }8 </style>9 <Script>Ten window.onload= function (){ One varALi=document.getElementsByTagName ('Li'); A //var onOff = true; Only one group can be controlled! - - for( varI=0; I<ali.length; I++ ){ the - Ali[i].onoff= true; - - Ali[i].onclick= function (){ + - //alert (this.style.background); + //background can not be judged A //Color Red #f00 at //relative Path - - if ( This. OnOff) { - This. Style.background= 'URL (img/active.png)'; - This. OnOff= false; - } Else { in This. Style.background= 'URL (img/normal.png)'; - This. OnOff= true; to } + }; - } the }; * </Script> $ </Head>Panax Notoginseng - <Body> the + <ul> A <Li></Li> the <Li></Li> + <Li></Li> - </ul> $ $ </Body> - </HTML>
Ideas:
First find all the LI elements,
And then give the LI element here a custom attribute value of true;//
var aLi = document.getelementsbytagname (' li ');How to add true to each of them li? is to use a for loop to implement;
for (var i=0; i<ali.length; i++)
At the same time we want to see a click to produce a certain effect, all here need a click event, each Li will have a click event, so there is an onclick such an event
In the Loop body:
Ali[i].onclick = function () {}After clicking on it? Click to make a decision (so we need to if...else ... statement). If the result is true, execute the appropriate language, and then change its boolean value, for the next judgment;
In fact, from the point of view of solving problems, what should actually be solved? The problem is that you want to click on the Li list to produce different effects
So how do you produce different effects? By judging
And what is it to judge by what? Where does a Boolean value come from? From Custom Attributes
How do I add a custom attribute? With A For loop
Such a backward relationship to push out the solution;
Custom properties, section--js study notes 2015-5-25 (38th day)
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
