Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Crear catalogo de productos que pueda filtrarse por categorias

JavaScript - Crear catalogo de productos que pueda filtrarse por categorias

Volver
Nuevo Tema
<<>>
 
Vista:

Crear catalogo de productos que pueda filtrarse por categorias

Publicado por Stefania (1 intervención) el 15/12/2013 23:58:53
Buenas tardes, necesito crear un catalogo de productos que pueda filtrarse por categorias. Es decir, en mi código html tengo una lista con varios links y quiero que de acuerdo al link que se presione me muestre determinado div con su contenido.

Lo que quiero es crear una función en javascript que de acuerdo al link que presione, me muestre el contenido de determinado div y se oculte lo demás.

Mi codigo html es mas o menos asi:

<ul>
<li><a href="" id="categoria1"> Acción </a></li>
<li> <a href="" id="categoria2"> Aventura </a></li>
</ul>

<div class="categoria1"> Todo el contenido de la categoria 1. </div>
<div class="categoria2"> Todo el contenido de la categoria 2. </div>

Espero me puedan ayudar, me serviria de mucho. Gracias!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Crear catalogo de productos que pueda filtrarse por categorias

Publicado por Jose Ma (1 intervención) el 12/05/2017 02:28:24
Usas el mismo div y solo especificas en java lo que quieres que se muestre segun el boton al que se le de click

En lo que tenga tiempo te subo un ejemplo para que lo adaptes a tu sitio
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Stalin

Crear catalogo de productos que pueda filtrarse por categorias

Publicado por Stalin (6 intervenciones) el 12/05/2017 16:49:07
Hola, lo que necesitas es algo así, espero sea de ayuda.

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
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
 
 
function MyFuncionDiv1 (parametro) {
      var div1 = document.getElementById('categoria1');
      var div2 = document.getElementById('categoria2');
 
        div1.style.display = 'none';
        div2.style.display = 'none';
 
      if (parametro == 'categoria1') {
        document.getElementById('categoria1').style.display = 'block';
        document.getElementById('categoria2').style.display = 'none';
      }else{
        div1.style.display = 'none';
        div2.style.display = 'block';
      }
 
 
    }
</script>
</head>
<body>
 
 
 
 
<ul>
<li><a href="#"  onclick="MyFuncionDiv1('categoria1');" > Acción </a></li>
<li> <a href="#"  onclick="MyFuncionDiv1('categoria2');"> Aventura </a></li>
</ul>
 
<div style="display:none;" id="categoria1" > Todo el contenido de la categoria 1. </div>
<div  id="categoria2" > Todo el contenido de la categoria 2. </div>
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar