JavaScript - Show Hide. Crear estilo.

 
Vista:
sin imagen de perfil

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 08/04/2017 21:19:07
Hola, he creado una serie de enlaces que al pinchar hacen aparecer diferentes div que estaban ocultos en la misma página. Pero para definir el estilo de los divs ocultos tengo que hacerlo a cada uno con la etiqueta Style en el propio html y me gustaría crearles una sola clase en la hoja de estilos para todos, en el momento que lo hago el estilo no funciona...

1
2
3
4
5
6
7
8
9
10
<div class="buttons">
<a class="button" id="showdiv1">Logotipos</a>
<a class="button" id="showdiv2">Carteles</a>
<a class="button" id="showdiv3">Portadas</a>
<a class="button" id="showdiv4">Tríticos</a>
</div>
<div id="div1">descripcion1</div>
<div id="div2" style="display: none">descripcion2</div>
<div id="div3" style="display: none">descripcion3</div>
<div id="div4" style="display: none">descripcion4</div>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
 
    $('#showdiv1').click(function() {
        $('div[id^=div]').hide();
        $('#div1').show();
    });
 
    $('#showdiv2').click(function() {
        $('div[id^=div]').hide();
        $('#div2').show();
    });
 
    $('#showdiv3').click(function() {
        $('div[id^=div]').hide();
        $('#div3').show();
    });
 
    $('#showdiv4').click(function() {
        $('div[id^=div]').hide();
        $('#div4').show();
    });
 
})

Aquí lo podeis ver en funcionamiento:

http://enestudiografico.com/servicios.html

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
Imágen de perfil de kip
Val: 582
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Show Hide. Crear estilo.

Publicado por kip (106 intervenciones) el 08/04/2017 21:48:45
Hola, creo que en este caso te conviene mejor crear dos clases en CSS una para ocultar y otra para establecer el diseño que quieres:

1
2
3
4
5
6
.hidden {
    display:none;
}
.clase {
    /*EL ESTILO QUE DESEES*/
}

Luego con jQuery en lugar de usar las funciones hide() y show() usaria las funciones addClass() y removeClass(), asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
 
    $('#showdiv1').click(function() {
        $('div[id^=div]').removeClass('clase').addClass('hidden');
        $('#div1').addClass('clase');
    });
 
    $('#showdiv2').click(function() {
        $('div[id^=div]').removeClass('clase').addClass('hidden');
        $('#div2').addClass('clase');
    });
 
    $('#showdiv3').click(function() {
        $('div[id^=div]').removeClass('clase').addClass('hidden');
        $('#div3').addClass('clase');
    });
 
    $('#showdiv4').click(function() {
        $('div[id^=div]').removeClass('clase').addClass('hidden');
        $('#div4').addClass('clase');
    });
 
});

Aunque si te das cuenta es codigo repetitivo, que te parece si lo reducimos e intentamos asi:

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
 
    $('a[id^="showdiv"]').on('click', function() {
       var num = parseInt(this.id.toString().replace(/\D+/, ''));
       $('div[id^=div]').removeClass('clase').addClass('hidden');
       $('#div' + num).addClass('clase');
    });
 
});

De esa forma te ahorras unas cuantas lineas, si te gusta pruebala.

Nos cuentas como te fue.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 05:46:25
Hola kip, muy elegante tu última propuesta, se ahorra mucho código y casi funciona pues hay un problema:

En .clase pongo display:block para que aparezcan pero, sin hacer ningún click que active la función, como valor inicial aparecen todos en bloque... He leído sobre valores del display pero no consigo elegir uno mejor, o el correcto, creo que habría que añadir algo al script para ese estado inicial... para que por ejemplo salga la descripción solo del primer enlace <a>, y si me apuras que no aparezca ninguno... pero lo desconozco...

Te dejo el enlace por si no me has entendido:

http://enestudiografico.com/servicios.html

Gracias!
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 kip
Val: 582
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Show Hide. Crear estilo.

Publicado por kip (106 intervenciones) el 09/04/2017 06:01:29
Creo que no entendiste lo que quise explicar para solucionar el problema, primero añade en tu archivo CSS estas lineas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.clase {
    padding: 20px;
    width: 50%;
    color: rgb(3, 50, 61);
    margin: 0px auto;
    font-family: Exo, sans-serif;
    font-weight: 300;
    font-size: 14px;
    border-style: dotted;
    border-top-width: 2px;
    border-color: rgb(3, 50, 61);
    height: 60px;
    display: block;
}
.hidden {
    display: none;
}

Luego simplemente a cada div en cuestion le das como clase inicial hidden, asi:

1
2
3
4
5
6
7
8
9
10
11
<div id="div1" class="hidden">
Formulario de preguntas, planteadas previo estudio del negocio, y respuestas, redactadas por el cliente, que engloblan las premisas necesarias para que el creativo se adecue con mayor acierto a las expectativas del interesado.
</div>
 
<div id="div2" class="hidden">
Esquema de numerosas ideas surgidas a raíz de un Brainstorming (lluvia de ideas), sin presumir de detalles y sin estructuras definitivas.
</div>
 
.....
 
.....

Luego con el código de arriba bastaría para que cuando hagas click en algun <a> muestre el div correspondiente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 06:03:53
Vale, hacia lo que decias pero ponía a los divs las dos clases .clase y .hidden, voy a probar.... Aun no he subido las modificaciones
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
sin imagen de perfil

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 06:07:56
Si, era ese error, habia puesto a los divs las dos clases. Funciona perfecto!
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 kip
Val: 582
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Show Hide. Crear estilo.

Publicado por kip (106 intervenciones) el 09/04/2017 06:50:01
La ventaja que le veo a esta solucion es que puedes agregar tantos <a> como desees con sus respectivos divs a mostrar respetando su relacion (con numeros en sus IDs) sin preocuparte por colocar sus ids en el codigo javascript mas que en su estructura HTML, tampoco embeber codigo javascript en cada atributo o evento (es algo que no recomiendo)....

Tambien es posible lograrlo sin jQuery:

1
2
3
4
5
6
7
8
9
document.querySelector('.buttons').addEventListener('click', function(e) {
    var elem = e.target.id.toString();
    if (elem.indexOf('show') > -1) {
        var num = parseInt(elem.toString().replace(/\D+/, ''));
        var div = document.querySelector('.clase');
        if(div !== null) div.className = 'hidden';
        document.querySelector('#div' + num).className = 'clase';
    }
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de ScriptShow
Val: 1.574
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Show Hide. Crear estilo.

Publicado por ScriptShow (658 intervenciones) el 08/04/2017 22:59:56
Saludos Antonio,

hay formas muy sencillas para conseguir resultados iguales/parecidos. Veamos:

http://www.lawebdelprogramador.com/codigo/JavaScript/3760-Manejo-de-etiquetas-por-nombre-e-indexado.html

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 05:47:51
Muchas gracias ScriptShow pero no he sabido aplicarlo, creo que voy a intentar el de kip :)
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 ScriptShow
Val: 1.574
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Show Hide. Crear estilo.

Publicado por ScriptShow (658 intervenciones) el 09/04/2017 01:19:35
El código base:

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
<style>
.divs {
display:none;width:50%;height:60px;margin:auto;padding:20px;color:#03323D;font-family:'Exo', sans-serif;font-weight:300;font-size:14px;border-top:2px dotted #03323D;
}
a {
padding:10px;font-family:'Exo', sans-serif;text-decoration:none;color:#1CA4BA;
}
</style>
 
<script>
var actual=null;
function toggle(id) {
if (actual != null) document.getElementById(actual).style.display="none";
actual=id;
document.getElementById(id).style.display="block";
}
</script>
 
<p align="center">
<a href="javascript:toggle('div1')">Logotipos</a>
<a href="javascript:toggle('div2')">Carteles</a>
<a href="javascript:toggle('div3')">Portadas</a>
<a href="javascript:toggle('div4')">Trípticos</a>
</p>
 
<div id="div1" class="divs">Formulario de preguntas, planteadas previo estudio del negocio, y respuestas, redactadas por el cliente, que engloblan las premisas necesarias para que el creativo se adecue con mayor acierto a las expectativas del interesado.</div>
<div id="div2" class="divs">Esquema de numerosas ideas surgidas a raíz de un Brainstorming (lluvia de ideas), sin presumir de detalles y sin estructuras definitivas.</div>
<div id="div3" class="divs">3</div>
<div id="div4" class="divs">4</div>

No precisa librerías, etc. Es compatible con navegadores actuales y no actuales...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 06:00:05
Perfecto ScriptShow, así sí! Había pensado en utilizar toggle pero encontré la primera solución...

Muchas gracias
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 ScriptShow
Val: 1.574
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Show Hide. Crear estilo.

Publicado por ScriptShow (658 intervenciones) el 09/04/2017 23:55:00
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar