Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>JQuery exercise4</title>
- <script src="../JQuery_lib/jquery-3.4.1.js"></script>
- <style>
- div{
- display: inline-block;
- max-width: 300px;
- }
- #circle{
- /* De manier waarop ik de circle heb gemaakt is een lelijke workaround. Maar het werkt xD */
- clear:both;
- display: block;
- background-color:lightgreen;
- border: 1px solid lightgreen;
- border-radius: 50%;
- padding: 30px;
- }
- .yellow{
- background-color: yellow;
- }
- .blue{
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <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>
- <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>
- <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>
- <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>
- <div id="circle">
- <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>
- </div>
- <script>
- $(document).ready(function(){
- $('.divEvenOdd:odd').addClass('yellow');
- $('.divEvenOdd:even').addClass('blue');
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
