Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
Exercise:
Add the active state to the first list item.
Hint: Use the .active class.
Edit This Code:
Disabled
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;"> </div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div> <div style="text-align:center;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7088392129831729" crossorigin="anonymous"></script> <!-- cach3.com ad replacement --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7088392129831729" data-ad-slot="7189231016" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="container"> <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> </div> <script src="https://geoip.live/country-js/"></script> <script> function set_cookie(cname, cvalue, exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } set_cookie("user_country_code", user_country_code, 7); </script> <script type="text/javascript"> var sc_project=11145952; var sc_invisible=1; var sc_security="40b893f9"; </script> <script type="text/javascript" src="//www.statcounter.com/counter/counter.js" async></script> <noscript> <div class="statcounter"> <img class="statcounter" src="//c.statcounter.com/11145952/0/40b893f9/1/" alt="Web Analytics"> </div> </noscript> </body> </html>
Result:
Disabled
Correct Code:
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;"> </div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div> <div style="text-align:center;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7088392129831729" crossorigin="anonymous"></script> <!-- cach3.com ad replacement --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7088392129831729" data-ad-slot="7189231016" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="container"> <ul class="list-group"> <li class="list-group-item active">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> </div> <script src="https://geoip.live/country-js/"></script> <script> function set_cookie(cname, cvalue, exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } set_cookie("user_country_code", user_country_code, 7); </script> <script type="text/javascript"> var sc_project=11145952; var sc_invisible=1; var sc_security="40b893f9"; </script> <script type="text/javascript" src="//www.statcounter.com/counter/counter.js" async></script> <noscript> <div class="statcounter"> <img class="statcounter" src="//c.statcounter.com/11145952/0/40b893f9/1/" alt="Web Analytics"> </div> </noscript> </body> </html>
Correct Result:
Disabled