Buenos dias. Tengo un código que quisiera mejorar en mi proyecto. La funcionalidad es gestionar un menú de pestañas o cortinillas. Lo básico ya está conseguido (gracias Chicohot), el problema es que la pestaña "activa" no mantiene el foco persistentemente
, cuando pincho sobre ella cambia de color y presenta la información requerida a través del enlace de la lista correspondiente, sin embargo si pincho fuera del formulario pierde el foco aunque se mantiene la información presentada. Todo esto está funcionando en un DIV dentro de una página de mi proyecto.La estructura es la siguiente:
En la página, en el head, tengo un include que llama a este AJAX:
Código:
Que le pasa los valores de estos enlaces: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(function(){
$(".button").click(function(){
$('#resultado').html("Cargando...");
var valor=$(this).attr("rel");
$.ajax({
url: '../phpBits/BotonesMenuPER.php',
data: 'boton='+valor,
type: 'POST',
success: function(data){
$('#contenido').html(data);
}
});
});
});
</script>
Código HTML:
Código HTML:
<div id="Pestanas"> <ul> <li ><a href="#" rel="1" class="button">Perfil</a></li> <li ><a href="#" rel="2" class="button">Referencias</a></li> <li ><a href="#" rel="3" class="button">Documentos</a></li> </ul> </div>
Código PHP:
Código PHP:
<?php session_start ();
$boton=$_POST['boton'];
//Cambio el contenido del DIV con los botones del menu
switch ($boton){
case "1":
include ("../forms/DatosPerfilConsultor.php");
break;
case "2":
include ("../forms/Body_Form_Txt_REFCon.php");
break;
case "3":
include ("../forms/Body_Form_Txt_RGTUSERCon.php");
break;
default:
include ("../forms/DatosPerfilConsultor.php");
}
?>
Código:
Esto, en general me funciona bien y con mi actual nivel de conocimientos me resulta flexible para después adaptarlo al resto de mi proyecto. pero le falta la persistencia del enlace y la carga predeterminada de la página inicial. Tengo entendido que con Jquery es posible resolverlo, hasta donde yo sé no es un problema CSS. /*Menus de pestaña*/
#Pestanas{float:left;z-index:1;margin-left: 4px;width: 100%;padding-left: 5px;z-index:1}
#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:5px;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a{float:left;color: white;background-color: FireBrick;border:2px Solid #8b0000;margin-left: 4px;padding:5px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
.button {display:inline;line-height: 1.5em;margin:0 0 0 0;padding:7px; border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas li a:hover{background-color: #d50509;border:2px Solid #8b0000;}
#Pestanas li a:focus {background:#e9e9e9;border:2px Solid #8b0000;text-decoration: none; color:FireBrick; border-bottom:2px Solid#e9e9e9;}
#Pestanas li a:active{background:#e9e9e9;border:2px Solid #8b0000; }
#Pestanasline{margin-top:7px;padding: 0;width: 100%;height: 2px;line-height: 1px;background: #8b0000;}
/*Contenido página formularios página central*/
#contenido {float:left;width: 100%;z-index:5;padding:0;margin:-2px 0 0 0; border-top:2px Solid #8b0000; border:2px Solid #8b0000;}
¿Alguien sabe cómo resolver este bonito enigma?
Se que no me merezco tanta atención. Pero pensad que esto mejorará mucho vuestro Karma y en la próxima reencarnación sereis mejores personas
.Gracias por vuestra ayuda,
