0

Tengo el siguiente codigo, esta dividido en dos columnas de lado izquierdo estan los links de registros y de lado derecho el formulario respectivo a cada registro.

Mi pregunta es la siguiente, como se pueden ocultar todos los formularios y que se muestre uno cuando se le de clic al respectivo registro

<div class="container">
            <div class="row">

                <div class="col-md-6">
                    <div id="tabs">
                        <ul class="nav nav-pills">
                        <li role="presentation"><a href="#tabs-1">Registro1</a></li>
                        <li role="presentation"><a href="#tabs-2">Registro2</a></li>
                        <li role="presentation"><a href="#tabs-3">Registro3</a></li>
                    </div><! --/tabs -->
                </div><! --/col-md-6 -->

                <div class="col-md-2">
                    <div id="tabs-1">
                        <h4>Registro1</h4>
                         <form id="t1" action="forma.php" method="post">
                            Red: <input type="text" id="red" name="red">
                            Codigo: <input type="text" id="codigo" name="codigo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
                         </form>
                    </div><! --/tabs1 -->

                    <div id="tabs-2">
                        <h4>Registro2</h4>
                         <form id="t2" action="forma.php" method="post">
                            Nombre: <input type="text" id="nombre" name="nombre">
                            Color: <input type="text" id="color" name="color">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
                         </form>
                    </div><! --/tabs2 -->


                    <div id="tabs-3">
                        <h4>Registro3</h4>
                         <form id="t3" action="forma.php" method="post">
                            Onda: <input type="text" id="onda" name="onda">
                            Tipo: <input type="text" id="tipo" name="tipo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
                         </form>
                    </div><! --/tabs3 -->
                </div><! --/col-md-2 -->

            </div><! --/row -->
</div><! --/container -->

2 respuestas 2

3

Considerando que estás utilizando Bootstrap, vamos aprovechando las caracteristicas que trae:

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href=".registro1" role="tab" data-toggle="tab">Registro 1</a></li>
  <li><a href=".registro2" role="tab" data-toggle="tab">Registro 2</a></li>
  <li><a href=".registro3" role="tab" data-toggle="tab">Registro 3</a></li>
  
  </ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active registro1">
       <h4>Registro1</h4>
                         <form id="t1" action="forma.php" method="post">
                            Red: <input type="text" id="red" name="red">
                            Codigo: <input type="text" id="codigo" name="codigo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
                         </form>
    
  </div>
  <div class="tab-pane registro2"> <h4>Registro2</h4>
                         <form id="t2" action="forma.php" method="post">
                            Nombre: <input type="text" id="nombre" name="nombre">
                            Color: <input type="text" id="color" name="color">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
                         </form></div>
  <div class="tab-pane registro3"> <h4>Registro3</h4>
                         <form id="t3" action="forma.php" method="post">
                            Onda: <input type="text" id="onda" name="onda">
                            Tipo: <input type="text" id="tipo" name="tipo">
                            <input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
                         </form></div>
  
</div>

y aquí con un poco de personalización

/* custom inclusion of right, left and below tabs */

.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}


.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;

}
 <script src="//code.jquery.com/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-md-6"><h3>Tabs verticales</h3>
              	
          <!-- tabs left -->
          <div class="tabbable tabs-left">
            <ul class="nav nav-tabs">
        <li class="active"><a href=".registro1" role="tab" data-toggle="tab">Registro 1</a></li>
      <li><a href=".registro2" role="tab" data-toggle="tab">Registro 2</a></li>
      <li><a href=".registro3" role="tab" data-toggle="tab">Registro 3</a></li>
            </ul>
            <div class="tab-content">
             <div class="tab-pane active registro1">
           <h4>Registro1</h4>
                             <form id="t1" action="forma.php" method="post">
                                Red: <input type="text" id="red" name="red">
                                Codigo: <input type="text" id="codigo" name="codigo">
                                <input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
                             </form>
        
      </div>
      <div class="tab-pane registro2"> <h4>Registro2</h4>
                             <form id="t2" action="forma.php" method="post">
                                Nombre: <input type="text" id="nombre" name="nombre">
                                Color: <input type="text" id="color" name="color">
                                <input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
                             </form></div>
      <div class="tab-pane registro3"> <h4>Registro3</h4>
                             <form id="t3" action="forma.php" method="post">
                                Onda: <input type="text" id="onda" name="onda">
                                Tipo: <input type="text" id="tipo" name="tipo">
                                <input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
                             </form></div>
       
            </div>
          </div>
          <!-- /tabs -->
          
        </div>   
      </div><!-- /row -->
    </div>

2

Para poder hacer lo que tu deseas de una manera más simplificada podrías hacer uso de jQuery y de las funciones show y hide

Las cuales hacen lo que su nombre dice. Mientras show muestra los elementos a los que se le llama, hide hace lo contrario.

Primeramente tenemos que pensar que al recién cargarse la página no queremos que se muestren los registros, ya que se mostrarán cuando hagamos clic en un enlace, es por ello que ocultaremos todos los ID #tabs-x.

Después, agregaremos a nuestros enlaces un ID con su respectivo nombre único (Como tiene que ser), y los mandamos a llamar cada vez que el usuario haga clic en ellos.

Si hacemos clic en el #enlace-1, tendremos que ocultar #tabs-2 y #tabs-3 y mostrar #tabs-1, si hacemos clic en #enlace-2, tendríamos que ocultar #tabs-1 y #tabs-3 y mostrar #tabs-2, y si hacemos clic en #enlace-3... Bueno, ya sabes que hacer ;)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Función JavaScript</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

	<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$('#tabs-1').hide();
		$('#tabs-2').hide();
		$('#tabs-3').hide();

		$('#enlace1').click(function(){
			$('#tabs-1').show();
			$('#tabs-2').hide();
			$('#tabs-3').hide();
		});

		$('#enlace2').click(function(){
			$('#tabs-2').show();
			$('#tabs-1').hide();
			$('#tabs-3').hide();
		});

		$('#enlace3').click(function(){
			$('#tabs-3').show();
			$('#tabs-2').hide();
			$('#tabs-1').hide();
		});
	});
</script>
<body>
	<div class="container">
     			<div class="row">
    				<div class="col-md-6">
    					<div id="tabs">
    						<ul class="nav nav-pills">
    						<li role="presentation"><a href="#tabs-1" id="enlace1">Registro1</a></li>
    						<li role="presentation"><a href="#tabs-2" id="enlace2">Registro2</a></li>
    						<li role="presentation"><a href="#tabs-3" id="enlace3">Registro3</a></li>
    					</div>
    				</div>
    				
    				<div class="col-md-2">
    					<div id="tabs-1">
    						<h4>Registro1</h4>
    						 <form id="t1" action="forma.php" method="post">
    							Red: <input type="text" id="red" name="red">
    							Codigo: <input type="text" id="codigo" name="codigo">
    							<input class="btn btn-theme" type="submit" value="Registrar" name="registro1FormSubmitted" >
    						 </form>
    					</div>
    
    					<div id="tabs-2">
    						<h4>Registro2</h4>
    						 <form id="t2" action="forma.php" method="post">
    							Nombre: <input type="text" id="nombre" name="nombre">
    							Color: <input type="text" id="color" name="color">
    							<input class="btn btn-theme" type="submit" value="Registrar" name="registro2FormSubmitted" >
    						 </form>
    					</div>
    
    
    					<div id="tabs-3">
    						<h4>Registro3</h4>
    						 <form id="t3" action="forma.php" method="post">
    							Onda: <input type="text" id="onda" name="onda">
    							Tipo: <input type="text" id="tipo" name="tipo">
    							<input class="btn btn-theme" type="submit" value="Registrar" name="registro3FormSubmitted" >
    						 </form>
    					</div>
    				</div>
    
    			</div>
    </div>
</body>
</html>

Si tienes alguna duda aún, no dudes en dejarme un comentario para poderte ayudar! Saludos y éxito :)

1
  • muy buena explicacion @Hoose, pude resolver mi problema
    – Houdini
    Commented el 1 sept. 2016 a las 19:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.