JavaScript DHTML/jQuery/removeClass

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

Add and remove style class

   <source lang="html4strict">
  

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <style type="text/css">
       .changeP { font-weight: bold; color:red;}
   </style>
   <script type="text/javascript">
$(document).ready(function(){
   $("input.buttonA").click(function(){ $("p.fifthparagraph").addClass("changeP"); });
   $("input.buttonB").click(function(){ $("p.fifthparagraph").removeClass("changeP"); });
});
   </script>
 </head>
 <body>
   <input type="button" value="Change" class="buttonA" />
   <input type="button" value="Change" class="buttonB" />

Header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 </body>

</html>


 </source>
   
  


removeClass(class) removes all or the specified class

   <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:even").removeClass("highlight");
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>

Hello

   </body>

</html>

 </source>
   
  


Remove class from all

   <source lang="html4strict">
   

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("#container").click(function (e) {
             $("*").removeClass("className");
             e.preventDefault();
             return false;
           });
       });
   </script>
 </head>
 <body>
   <body>
 </body>

</html>



 </source>
   
  


Remove class from even number paragraph

   <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:even").removeClass("blue");
       });
   </script>
 </head>
  <style>
     .blue { color:blue; }
 </style>
 <body>
   <body>

A

A

A

 </body>

</html>



 </source>
   
  


Remove style class from first paragraph

   <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:first").removeClass("blue");
       });
   </script>
 </head>
  <style>
     .blue { color:blue; }
 </style>
 <body>
   <body>

A

A

A

 </body>

</html>



 </source>