SHARE
TWEET

Jquery exercise4

a guest Sep 11th, 2019 120 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>JQuery exercise4</title>
  8.     <script src="../JQuery_lib/jquery-3.4.1.js"></script>
  9.  
  10.     <style>
  11.         div{
  12.             display: inline-block;
  13.             max-width: 300px;
  14.         }
  15.         #circle{
  16.             /* De manier waarop ik de circle heb gemaakt is een lelijke workaround. Maar het werkt xD */
  17.             clear:both;
  18.             display: block;
  19.             background-color:lightgreen;
  20.             border: 1px solid lightgreen;
  21.             border-radius: 50%;
  22.             padding: 30px;
  23.         }
  24.         .yellow{
  25.             background-color: yellow;
  26.         }
  27.         .blue{
  28.             background-color: blue;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="divEvenOdd">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget arcu nulla. Proin aliquam est augue, eu finibus enim volutpat ut. In iaculis malesuada malesuada. Donec posuere leo non pulvinar sagittis. Aliquam aliquet, ipsum a sagittis consequat, massa nibh viverra ligula, eget consectetur felis quam vitae erat. Donec pretium diam eget lacinia euismod. Vivamus vestibulum faucibus nisl, id fringilla ex tempus a. Curabitur nec elit tellus. Nam condimentum urna a magna tristique congue. Proin pulvinar neque vitae justo tempus condimentum. Donec blandit efficitur felis non dapibus.</div>
  34.     <div class="divEvenOdd">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget arcu nulla. Proin aliquam est augue, eu finibus enim volutpat ut. In iaculis malesuada malesuada. Donec posuere leo non pulvinar sagittis. Aliquam aliquet, ipsum a sagittis consequat, massa nibh viverra ligula, eget consectetur felis quam vitae erat. Donec pretium diam eget lacinia euismod. Vivamus vestibulum faucibus nisl, id fringilla ex tempus a. Curabitur nec elit tellus. Nam condimentum urna a magna tristique congue. Proin pulvinar neque vitae justo tempus condimentum. Donec blandit efficitur felis non dapibus.</div>
  35.     <div class="divEvenOdd">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget arcu nulla. Proin aliquam est augue, eu finibus enim volutpat ut. In iaculis malesuada malesuada. Donec posuere leo non pulvinar sagittis. Aliquam aliquet, ipsum a sagittis consequat, massa nibh viverra ligula, eget consectetur felis quam vitae erat. Donec pretium diam eget lacinia euismod. Vivamus vestibulum faucibus nisl, id fringilla ex tempus a. Curabitur nec elit tellus. Nam condimentum urna a magna tristique congue. Proin pulvinar neque vitae justo tempus condimentum. Donec blandit efficitur felis non dapibus.</div>
  36.     <div class="divEvenOdd">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget arcu nulla. Proin aliquam est augue, eu finibus enim volutpat ut. In iaculis malesuada malesuada. Donec posuere leo non pulvinar sagittis. Aliquam aliquet, ipsum a sagittis consequat, massa nibh viverra ligula, eget consectetur felis quam vitae erat. Donec pretium diam eget lacinia euismod. Vivamus vestibulum faucibus nisl, id fringilla ex tempus a. Curabitur nec elit tellus. Nam condimentum urna a magna tristique congue. Proin pulvinar neque vitae justo tempus condimentum. Donec blandit efficitur felis non dapibus.</div>
  37.     <div id="circle">
  38.             <div id="circle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget arcu nulla. Proin aliquam est augue, eu finibus enim volutpat ut. In iaculis malesuada malesuada. Donec posuere leo non pulvinar sagittis. Aliquam aliquet, ipsum a sagittis consequat, massa nibh viverra ligula, eget consectetur felis quam vitae erat. Donec pretium diam eget lacinia euismod. Vivamus vestibulum faucibus nisl, id fringilla ex tempus a. Curabitur nec elit tellus. Nam condimentum urna a magna tristique congue. Proin pulvinar neque vitae justo tempus condimentum. Donec blandit efficitur felis non dapibus.</div>
  39.     </div>
  40.    
  41.  
  42.     <script>
  43.         $(document).ready(function(){
  44.             $('.divEvenOdd:odd').addClass('yellow');
  45.             $('.divEvenOdd:even').addClass('blue');
  46.         });
  47.     </script>
  48. </body>
  49. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top