Как скрытие нескольких divs и показывать их, выбрав это

У меня есть следующий код, будь разделен на две колонны левой стороны - соединения реестров и правой стороны соответствующий формуляр в каждый реестр.

Мой вопрос - следующий, как могут скрываться все формуляры, и что явился одним, когда он клика в соответствующий реестр

<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 -->
0
задан 01.09.2016, 21:21
2 ответа

Чтобы мочь делать то, что ты желаешь более упрощенным способом, ты мог бы использовать jQuery и функций шоу и hide

Которые делают то, что Ваше имя говорит. Пока шоу показывает элементы, в которые звонят ему, hide он делает противоположность.

Сначала мы должны думать, что в только что, страница загружается, мы не хотим, чтобы они явились реестрами, так как они появятся, когда мы нажмем на ссылку, именно из-за этого мы скроем все идентификации #tabs-x.

После, мы добавим к нашим ссылкам идентификацию с Вашим соответствующим единственным именем (Как он должен быть), и мы посылаем называть их каждый раз, когда пользователь нажал на них.

Если мы кликнем в #enlace-1, мы будем должны скрывать #tabs-2 и #tabs-3 и показывать #tabs-1, кликаем ли мы в #enlace-2, мы были бы должны скрывать #tabs-1 и #tabs-3 и показывать #tabs-2, и если мы кликаем в #enlace-3... Ну, уже ты знаешь, что делать ;)

<!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>

Если у тебя есть какое-то сомнение еще, не сомневайся в том, чтобы оставлять мне комментарий, чтобы мочь помогать тебе! Привет и успех :)

1
ответ дан 24.11.2019, 13:31
  • 1
    очень хорошее объяснение @Hoose, я смог решать мою проблему –  Houdini 01.09.2016, 22:13

Считая, что ты используешь Bootstrap, мы используем характеристики, которые он приносит:

<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>

и здесь с немного 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>
3
ответ дан 24.11.2019, 13:31