1 <!-- Start Main Content -->
   2 <div id="main">
   3 
   4   <style type="text/css">
   5 .ThinListTable1 { width:480px;}
   6 .ThinListTable1 ul{ list-style-type:none; border:2px solid black; padding:0px; border-bottom:0px;}
   7 .ThinListTable1 li{ border-bottom:2px solid black; padding:4px; margin:0px;}
   8 .ThinListTable1 li:hover{ border:2pt solid red; }
   9 .picked{ background:gray; }
  10   </style>
  11 
  12 
  13   <p>This example page demonstrates how to select an item in a list using JQuery. The selected item is highlighted with a gray background. In addition, a second click deselects the an item if it is currently selected.</p>
  14 
  15   <div class="ThinListTable1">
  16   <ul>
  17     <li>List Item 1</li>
  18     <li>List Item 2</li>
  19     <li>List Item 3</li>
  20     <li>List Item 4</li>
  21     <li>List Item 5</li>
  22   </ul>
  23   </div>
  24 
  25     <p><a href="JQueryListSelectDeselect.html.txt">Get Source</a></p>
  26 
  27 
  28 
  29  <script type="text/javascript">
  30 
  31 // Mouse Handler
  32 function mouseHandler(e){
  33   // Add Picked Class
  34   if ($(this).hasClass('picked')) {
  35     $(this).removeClass('picked');
  36   } else {
  37     $(".picked").removeClass('picked');
  38     $(this).addClass('picked');
  39   } 
  40 }
  41 
  42 function start(){
  43   // Bind all li
  44   $('.ThinListTable1 li').bind('click', mouseHandler);
  45 }
  46 
  47 $(document).ready(start);
  48 </script>
  49 
  50 </div>
  51 <!-- End Main Content -->
  52