Desarrollo web ejemplo jquery botones

0

Por admin | Para la categoría de Ajax | noticia del 29-04-2010

Jquery nos permite trabajar de una forma rápida y sencilla con el dom del árbol de elementos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script  type="text/javascript" src="jquery.js" ></script>	
 <style type="text/css">
   #contenedor {
     width:600px;
     margin-left:auto;
     margin-right:auto;
   }
   #contenido {
   width:370px;    
   float:left;
   height:400px;
   }
 
   .segundo
   {
     font-size:14px;
     background-color:#ff8844;
   }
   .tercero
   {
     font-size:16px;
     background-color:#88ff77;
   }
   .contenidonuevo{
    color:#fff;    
   }
 
   #capaboton {
     float:left;
     width:160px;         
     padding:20px;    
    }
 
    .boton { width:100px;
    background-color:#ccc;
    border: #ddd 3px solid;
    padding:10px;     
    text-align:center;
    margin-bottom:5px;
    }  
 
    .seleccionado {
    border-style:double;
    border-color:#000;
   }    
   .ocultar {
    display:none;
   }
 
   </style>
  <script type="text/javascript">
 
     $(document).ready( function()
     { 
	$("#primero").bind("click", function () {
 
	  $("#contenido").removeClass("segundo").removeClass("tercero");	
	  $("#capaboton .boton").removeClass("seleccionado");
	  $(this).addClass("seleccionado");
 
 
	});
 
	$("#segundo").bind("click", function () {
 
	  $("#contenido").addClass("segundo").removeClass("tercero");
	  $("#capaboton .boton").removeClass("seleccionado");
	  $(this).addClass("seleccionado");
	});
 
	$("#tercero").bind("click", function () {
 
	  $("#contenido").addClass("tercero").removeClass("segundo");
	  $("#capaboton .boton").removeClass("seleccionado");
	  $(this).addClass("seleccionado");
 
	 });
	$("#contenido h2").toggle(	
	function() { $("#capaboton .boton").addClass("ocultar"); }
	, 
        function() { $("#capaboton .boton").removeClass("ocultar"); }        
	);
     }
     );
  </script>
</head>
<body>
<div id="contenedor">
  <div id="contenido">
    <h2> Jquery </h2>
    <p>
       texto dentro de una capa de contenido
    </p>       
  </div>
  <div id="capaboton">
     <div class="boton" id="primero">
     cambiar
     </div>
     <div class="boton" id="segundo">
     cambiar dos
     </div>
     <div class="boton" id="tercero">
     cambiar tres
     </div>
  </div>
</div>
</body>
</html>

imagen inicial

seleccionamos el segundo botón

seleccionamos el tercer botón

Comentarios cerrados automáticamente al pasar más de un año