Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Problemas con los contenido de los tab

Estas en el tema de Problemas con los contenido de los tab en el foro de Jquery en Foros del Web. hola que tal necesito saber si alguien me puede ayudar a solucionar un problema, que ya tengo varios dias quebrandome la cabeza con los contenidos ...
  #1 (permalink)  
Antiguo 04/08/2016, 14:24
 
Fecha de Ingreso: agosto-2013
Mensajes: 6
Antigüedad: 10 años, 7 meses
Puntos: 0
Problemas con los contenido de los tab

hola que tal necesito saber si alguien me puede ayudar a solucionar un problema, que ya tengo varios dias quebrandome la cabeza con los contenidos de los tab:

Tengo los siguientes tabs: Datos generales, Datos de empleos, Otros datos,
En los cuales en cada uno de ellos manejo cajas de texto, radio buttons, checkbox y <a>

Cuando hago una quiero escribir en una caja de texto de datos generales no me deja escribir nada,
y luego cuando cambio de tab a datos de empleos quiero seleccionar un radio y no me deja , a su vez ese radio tiene una funcion de javascrip que me trae otros elementos..

Espero me puedan ayudar :(

Este es el código

<div id="divContenedor" name="divContenedor">
<!--Pestaña 1 activa por defecto-->
<input id="tab-1" type="radio" name="tab-group" checked="checked"/>
<label for="tab-1"> Datos formales</label>
<!--Pestaña 2 inactiva por defecto-->
<input id="tab-2" type="radio" name="tab-group" />
<label for="tab-2"> Datos informales</label>
<!--Pestaña 3 inactiva por defecto-->
<input id="tab-3" type="radio" name="tab-group" />
<label for="tab-3">Otros datos,</label>
<div id="divDatosFormales">
<table>
<tr>
<td>Nombre especie<input type="text" name="nombreEspecie" id="nombreEspecie"></input>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Autor autoridad:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="activarBusqueda" name="activarBusqueda" onClick="ActivarAutorAutoridad()"><i class="fa fa-search fa-2x" aria-hidden="true"></i>Buscar
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="activarNuevoAutorAutoridad" name="activarNuevoAutorAutoridad" onClick="ActivarNuevoAutorAutoridad()"><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
&nbsp;Nuevo</a>
</td>
</tr>
<tr>
<td>
<div id="divConsultarAutorAutoridad" name="divConsultarAutorAutoridad">
</div>
</td>
</tr>
<tr>
<td>
Tipo cita:
</td>
</tr>
<tr>
<td>Libro o publicacion unica
<INPUT type='radio' name="cita" id="cita" value="libro" onclick="EtiquetasAltaCitaLibroPublicacionUnica(th is)"/>
<div id="divEtiquetasAltaCitaLibro" name="divEtiquetasAltaCitaLibro">
</div>
</td>
</tr>
<tr>
<td>Revista
<INPUT type='radio' name="cita" id="cita" value="revista" onclick='EtiquetasAltaCitaRevistaPublicacionPeriod ica(this)'/>
<div id="divEtiquetasAltaCitaRevista" name="divEtiquetasAltaCitaRevista">
</div>
</td>
</tr>
</table>
</div>
<div id="divDatosInformales">
<table id="tBasonimo" name="tBasonimo">
<tr>
<td>Nombre basonimo
<input type="text" name="nombreBasonimo" id="nombreBasonimo"></input>
</td>
</tr>
<tr>
<td>Autor autoridad:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="activarBusqueda" name="activarBusqueda" onClick="ActivarAutorAutoridadBasonimo()"><i class="fa fa-search fa-2x" aria-hidden="true"></i>Buscar
</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="activarNuevoAutorAutoridadBasonimo" name="activarNuevoAutorAutoridadBasonimo" onClick="ActivarNuevoAutorAutoridadBasonimo()"><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i>
&nbsp;Nuevo</a>
</td>
</tr>
<tr>
<td>
<div id="divConsultarAutorAutoridadBasonimo" name="divConsultarAutorAutoridadBasonimo">
</div>
</td>
</tr>
<tr>
<td>
Tipo cita:
</td>
</tr>
<tr>
<td>Libro o publicación unica
<INPUT type='checkbox' name="citaBasonimo" id="citaBasonimo" value="libro" onclick="EtiquetasAltaCitaLibroPublicacionUnicaBas onimo(this)"/>
</td>
</tr>
<tr>
<td>Revista
<INPUT type='checkbox' name="citaBasonimo" id="citaBasonimo" value="revista" onclick='EtiquetasAltaCitaRevistaPublicacionPeriod icaBasonimo(this)'/>
</td>
</tr>
</table>
</div>
<div id="divOtrosDatos">
<p>agregar contenido</p>
</div>
</div>

lo que hace que funcione las tabs
#divContenedor #divDatosFormales,#divContenedor #divDatosInformales,
#divContenedor #divOtrosDatosspecie,
#divEtiquetasAltaEspecie #usosNombreComun{
opacity: 0;
padding: 1.5em;
position: absolute;
z-index: -100;
}
#datosEspecie tr {
clear: both;
margin-bottom: 1em;
}
#datosEspecie #divDatosEspecie1 {
float: left;
margin-right: 1em;
}
#datosEspecie #divDatosEspecie2{
float:right;
margin-right: 1em;
}
/*#basonimo tr {
float: left;
width: 48.5%;
}*/
#divBasonimo1 {
float: left;
margin-right: 1em;
}
#divBasonimo2{
float:right;
margin-right: 1em;
}
#sinonimos tr {
margin-bottom: 1em;
}
#sinonimos ul {
margin-left: 2em;
}

#informacionEspecie tr {
clear: both;
margin-bottom: 1em;
}
#informacionEspecie p.left img {
float: left;
margin-right: 1em;
}
#informacionEspecie p.last {
margin-bottom: 0;
}

#usosNombreComun tr {
clear: both;
margin-bottom: 1em;
}
#usosNombreComun p.left img {
float: left;
margin-right: 1em;
}
#usosNombreComun p.last {
margin-bottom: 0;
}

#divContenedorEtiquetasEspecie input#tab-1:checked ~ #divEtiquetasAltaEspecie #datosEspecie,
#divContenedorEtiquetasEspecie input#tab-2:checked ~ #divEtiquetasAltaEspecie #basonimo,
#divContenedorEtiquetasEspecie input#tab-3:checked ~ #divEtiquetasAltaEspecie #sinonimos,
#divContenedorEtiquetasEspecie input#tab-4:checked ~ #divEtiquetasAltaEspecie #informacionEspecie,
#divContenedorEtiquetasEspecie input#tab-5:checked ~ #divEtiquetasAltaEspecie #usosNombreComun{
opacity: 1;
z-index: 100%;
}
  #2 (permalink)  
Antiguo 06/08/2016, 09:54
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Problemas con los contenido de los tab

Eso suele suceder porque las otras vistas quedan una debajo de otra y, por ende, sus elementos dejan de ser accesibles. Una solución simple consiste en que, cuando una vista se haga visible, incrementes el valor de su propiedad z-index.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 22/08/2016, 11:26
 
Fecha de Ingreso: agosto-2013
Mensajes: 6
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Problemas con los contenido de los tab

Gracias Alexis88 por contestar.. :D

He solucionado el problema he puesto esta codigo y funciona de maravilla no me crea problemas al momento de cambiarmede una tab a otra :D
<script type="text/javascript">
//05/08/2016
var i=1;
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});

Etiquetas: contenido, tab
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:01.