Advanced Search

jQuery: Sequential List

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript" src="jquery.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.  
  6.   $("#step li").each(function (i) {
  7.     i = i+1;
  8.     $(this).addClass("item" i);
  9.    });
  10.  
  11. });
  12. </script>
  13. <style>
  14. #step .item1 {
  15.   background: url(step1.png) no-repeat;
  16. }
  17. #step .item2 {
  18.   background: url(step2.png) no-repeat;
  19. }
  20. #step .item3 {
  21.   background: url(step3.png) no-repeat;
  22. }
  23. <body>
  24. <ol id="step">
  25. <li></li>
  26. <li></li>
  27. <li></li>
  28. </ol>
  29. </body>
  30. </style>

URL: http://www.webdesignerwall.com/tutorials/jquery-sequential-list/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.