Buenas,
Estoy haciendo un sistema de pestañas en jquery, donde cargo la información con la función LOAD, pero me gustaría marcar las pestaña que está seleccionada. He probado y lo puedo conseguir agregando la clase especifica a la pestaña.
$("#datos").addClass('tabselected');
El problema es que si hago esto para el resto de pestañas, si el usuario va clicando en cada una de ellas, se van marcando todas jejeje
Podría en el mismo lugar de la pestaña eliminar el resto de estilos de cada una de las pestañas, pero no se me ocurre la forma optima sin tener que poner en cada pestaña, las 5 lineas para que elimine cada estilo.
¿Sabéis si existe alguna forma de recorrer las pestañas más cómodamente y que solo permita que se marque la pestaña actual?
Este es el código que uso
Código Javascript
:
Ver original$(document).ready(function(){
//References
var sections = $("#clienttabs li");
var loading = $("#loading");
var content = $("#contenttab");
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "datos":
//content.slideUp();
content.load("/secciones/mi_cuenta/cc_datos_usuario.php", hideLoading).hide().fadeIn('slow');
$("#datos").addClass('tabselected');
//content.slideDown();
break;
case "avatar":
//content.slideUp();
content.load("/secciones/mi_cuenta/cc_avatar.php", hideLoading).hide().fadeIn('slow');
$("#avatar").addClass('tabselected');
//content.slideDown();
break;
case "pass":
//content.slideUp();
content.load("sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
$("#pass").addClass('tabselected');
//content.slideDown();
break;
case "preferencias":
//content.slideUp();
content.load("sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
$("#preferencias").addClass('tabselected');
//content.slideDown();
break;
case "privacidad":
//content.slideUp();
content.load("sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
$("#privacidad").addClass('tabselected');
//content.slideDown();
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
});
//show loading bar
function showLoading(){
loading
.css({display:"block"})
.css({opacity:"1"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});