Click to toggle highlight on the list item. : UL LI « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. UL LI

Click to toggle highlight on the list item.

  


<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
            $("li").toggle(
              function () {
                $(this).css("list-style-type", "disc")
                       .css("color", "blue");
              },
              function () {
                $(this).css({"list-style-type":"", "color":""});
              }
            );



        });
    </script>

  </head>
  <body>
    <body>
         <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
         </ul>
       
                         
    </body>
</html>








Related examples in the same category

1.Get LI one by one
2.To add a special style to list item that are being hovered over
3.Finds the second li in each matched ul and notes it.
4.Add style to li under a UL with certain id
5.Select Li by class style name nested ul with id
6.Add class to next li
7.Add class to previous li
8.All from next li
9.All previous from a LI tag
10.Get parent for LI
11.All li under ul but not a class name
12.Click to select or unselect li item