JavaScript DHTML/jQuery/toggleClass

Материал из Web эксперт
Перейти к: навигация, поиск

toggleClass(class) adds the specified class if it is not present, removes the specified class if it is present.

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("p").click(function () {
                     $("p").toggleClass("highlight");     
           });
   
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>

Hello

   </body>

</html>

 </source>
   
  


ToggleClass function

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             $("p").click(function () {
                $(this).toggleClass("blue");
             });
       });
   </script>
 </head>
  <style>
     .blue { color:blue; }
 </style>
 <body>
   <body>

A

 </body>

</html>



 </source>
   
  


Toggle DIV color

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
    $("#run").click(function(){
     $("div").toggleClass("colored");
   });
 });
   </script>
<style>
 div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
 div.colored { background:green; }
 </style>
 </head>
 <body>
 <button id="run">Run</button>
asdf
asdf
asdf


 </body>

</html>



 </source>