javascript - Change ul li parent color -
i have code in html:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>form</title> <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script.js"></script> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <ul class="cars_menu"> <li>audi <ul> <li class="highlight">a4</li> <li>a6</li> <li>a3</li> <li>a5</li> </ul> </li> <li>volkswagen <ul> <li>golf iv</li> <li>golf vi</li> <li>golf v</li> <li>jetta</li> </ul> </li> <li>bmw <ul> <li>e36</li> <li>e60</li> <li>e70</li> <li>z4</li> </ul> </li> </ul> </body> </html> css code:
.highlight { color: red; } and script file:
$( "ul.cars_menu li" ).click(function() { $( ).toggleclass( "highlight" ); }); anyone know, how change color of audi, if click on a4, a6 should set color of a4 , audi red , if example click on golf iv needs change of volkswagen , golf iv red , on.
anyone me this? appreciate, guys :)
you need wrap jquery in :
$(document).ready(function() { $('ul.cars_menu li').click(function() { $( ).toggleclass( "highlight" ); }); }); reason - need wait dom finish loading before can set events on elements further down page...
$(document).ready event when dom finished loading & can manipulated...
editing include js fiddle examples on how can done: http://jsfiddle.net/7gdzlgam/
the answer on how target parent elements using jquery original question still applies example above.
Comments
Post a Comment