Nueva pregunta

Pregunta:

 
  1  
 
 
SoCu Karma: 132 España
 
 Fecha: 06-03-2018 07:12:37 (En Español)

HTML - Como poner un link a un botón y ocultar tabla.[Resuelta]

Hola, me podéis ayudar con el código, a ver si se puede conseguir lo que intento hacer.

Tengo creada la siguiente tabla, que al pulsar sobre el botón “libro 1” me muestra lo que contiene oculto “tema 1 y tema 2”, si pulso una segunda vez se oculta, pero lo que intento es que, si pulso en el cualquiera de los otros botones, que muestre el contenido que tiene oculto, pero que a la vez si hay otro libro que está mostrando su contenido que lo oculte.

Lo que funciona bien es cuando pulso sobre el botón “Tema 1”, que se oculta, esto está bien, pero lo que no se es como poner un link a los botones.

Hay otra cosa que intento hacer, y es juntar algo más los botones y los enlaces de texto, que no estén tan separado, como podría juntarlos más, tengo puesto unos valores para poder moverlos, pero no se queda juntos.

<html>
<head>
<title>Reglamento</title>
<meta charset="UTF-8">
<head>
</head>
<body>
 <button  type="button" onclick="Menu(DivLibro1, 'Libro1')">Libro Primero - xxxxxxxxxxxxxxxxxx</button>
 	<div id=DivLibro1 class=Libro1Oculto>
    <table cellspacing=0>
               <tr>
                   <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                   <td><button type="button" role="link" class="botonMenuDespl" onclick="Menu(DivLibro1, 'Libro1')">Tema 1</button></td>
               </tr>
               <tr>
                   <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                   <td><button type="button" class="botonMenuDespl" onclick="Menu(DivLibro1, 'Libro1')">Tema 2</button></td>
               </tr>                  
    </table>
    </div>
<br>
 	<button type="button" onclick="Menu(DivLibro2, 'Libro2')">Libro Segundo - xxxxxxxxx</button>
    <div id=DivLibro2 class=Libro2Oculto>
    <table cellspacing=0>
               <tr>
                   <td><span style="font: 15pt comic sans ms; color: blue">»  </span></td>
                   <td><a href="http://www.prueba.com">Tema 1</a></td>
               <tr> 
              <tr>
                 <td><span style="font: 15pt comic sans ms; color: blue">»  </span></td>
                 <td><a href="http://www.prueba.com">Tema 2</a></td>
              </tr>
    </table>
    </div>
<br>
 	<button type="button" onclick="Menu(DivLibro3, 'Libro3')">Libro Tercero - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</button>
    <div id=DivLibro3 class=Libro3Oculto>
    <table cellspacing=0>
              <tr>
                 <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                 <td><button type="button" class="botonMenuDespl" onclick="Menu(DivLibro3, 'Libro3')">Tema 1</button></td>
              </tr>
              <tr>
                 <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                 <td><button type="button" class="botonMenuDespl" onclick="Menu(DivLibro3, 'Libro3')">Tema 2</button></td>
              </tr>
    </table>
    </div>
</body>
</html>


Un saludo.
 Etiquetas: HTML5 Votos: 1 - Respuestas: 4 - Vistas: 17 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      2  
     
     
    Fernando Jimenez Karma: 599 México
     
    Fecha: 07-03-2018 07:21:35 Saludos, honestamente me dio flojera ver todo el codigo, pero te dejo la idea como seria, en si es facil no te rompas la cabeza, reinventando la rueda:

    <table class="classgeneral classid1"></table>
<table class="classgeneral classid2"></table>
<table class="classgeneral classid3"></table>
<table class="classgeneral classid4"></table>
<table class="classgeneral classid5"></table>

<btn onclick="ocultaesconde('1')"></btn>
<btn onclick="ocultaesconde('2')"></btn>
<btn onclick="ocultaesconde('3')"></btn>
<btn onclick="ocultaesconde('4')"></btn>
<btn onclick="ocultaesconde('5')"></btn>


    <style>
.classgeneral {
display:none;
}
</style>

    <script>
function ocultaesconde(elid) {

    if( $('.classid'+elid).is(":visible") ){
       $(".classgeneral").hide();
    } else {
       $(".classgeneral").hide();
       $('.classid'+elid).show();
    } 

}
</script>


    Recuerda, ninguna clase del css, debe estar con !important;
    El ejemplo es con jquery.
    Y el "llenado" de informacion, asi como forma de poner el boton, pues ya la haces tu...
    Saludos :)

    Stryfe™       Votos: 2 - Link respuesta
     
  •  
      2  
     
     
    Qué Código Karma: 2708 Colombia
     
    Fecha: 07-03-2018 18:45:16 Hola,
    Esta bien lo que estas haciendo pero de verdad estas es llamanado a una clase que en general existe en el primer elemento, recuerda que cuando se crea el documento el siempre la primera que tenga este, lo que tienes que hacer es crear una clase especial al subtema, porque no hara lo que deseas.
    Y para que este se oculte crea un map, que recorra todos los elementos y los oculte, una vez oculto que muestre el que quieres.

    Saludos.
    Equipo de Diseño y Desarrollo www.quecodigo.com       Votos: 2 - Link respuesta
     
  •  
      1  
     
     
    SoCu Karma: 132 España
     
    Fecha: 07-03-2018 21:06:29 Gracias CorpLan, voy algo justo con el tema de código, podrías poner ese código que comentas para ver si puedo probarlo.

    Ernesto gracias también a ti, luego cuando llegue a casa intentó hacer lo que dices, he visto los mensajes ahora y estoy con el móvil respondiendo para daros las gracias.       Votos: 1 - Link respuesta
     
  •  
      1  
     
     
    Chrismart Anji Karma: 1473 México
     
    Fecha: 11-03-2018 21:37:29 Hola SoCu ya resolvió esta pregunta? Quiero decir que yo soy un experto en javascript por si alguna vez necesitas mi ayuda solo comente aquí n.n   Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com