Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Quitar un estilo al marcar una pestaña

Estas en el tema de Quitar un estilo al marcar una pestaña en el foro de Frameworks JS en Foros del Web. 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á ...
  #1 (permalink)  
Antiguo 22/01/2011, 08:28
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Quitar un estilo al marcar una pestaña

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
  1. $(document).ready(function(){
  2.     //References
  3.     var sections = $("#clienttabs li");
  4.     var loading = $("#loading");
  5.     var content = $("#contenttab");
  6.    
  7.     //Manage click events
  8.     sections.click(function(){
  9.         //show the loading bar
  10.         showLoading();
  11.         //load selected section
  12.         switch(this.id){
  13.             case "datos":
  14.                 //content.slideUp();
  15.                 content.load("/secciones/mi_cuenta/cc_datos_usuario.php", hideLoading).hide().fadeIn('slow');
  16.                 $("#datos").addClass('tabselected');
  17.                 //content.slideDown();
  18.                 break;
  19.             case "avatar":
  20.                 //content.slideUp();
  21.                 content.load("/secciones/mi_cuenta/cc_avatar.php", hideLoading).hide().fadeIn('slow');
  22.                 $("#avatar").addClass('tabselected');
  23.                 //content.slideDown();
  24.                 break;
  25.             case "pass":
  26.                 //content.slideUp();
  27.                 content.load("sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
  28.                 $("#pass").addClass('tabselected');
  29.                 //content.slideDown();
  30.                 break;
  31.             case "preferencias":
  32.                 //content.slideUp();
  33.                 content.load("sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
  34.                 $("#preferencias").addClass('tabselected');
  35.                 //content.slideDown();
  36.                 break;
  37.             case "privacidad":
  38.                 //content.slideUp();
  39.                 content.load("sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
  40.                 $("#privacidad").addClass('tabselected');
  41.                 //content.slideDown();
  42.                 break;
  43.             default:
  44.                 //hide loading bar if there is no selected section
  45.                 hideLoading();
  46.                 break;
  47.         }
  48.     });
  49.  
  50.     //show loading bar
  51.     function showLoading(){
  52.         loading
  53.             .css({display:"block"})
  54.             .css({opacity:"1"})
  55.         ;
  56.     }
  57.     //hide loading bar
  58.     function hideLoading(){
  59.         loading.fadeTo(1000, 0);
  60.     };
  61. });
  #2 (permalink)  
Antiguo 22/01/2011, 08:36
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Quitar un estilo al marcar una pestaña

Antes lo publico antes lo encuentro!

Código Javascript:
Ver original
  1. case "datos":
  2. $("#clienttabs ul li").removeClass("tabselected"); //Remove any "tabselected" class
  3.                 content.load("/secciones/mi_cuenta/cc_datos_usuario.php", hideLoading).hide().fadeIn('slow');
  4. $("#datos").addClass('tabselected');
  5. break;

Salu2!

Etiquetas: estilo, pestaña, quitar
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 17:41.