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); }; });