Cómo hacer css a: ¿trabajo activo después del clic?

Estoy tratando de hacer que un menú funcione como tabs. Las tabs funcionan bien y los enlaces del menú también son geniales. Pero me gustaría eliminar el borde inferior de la pestaña activa, para que parezca que estás en esa página real. Intenté usar #id a:active pero parece funcionar solo mientras pulse el enlace. Tuve la idea de hacerlo también por javascript, pero parece que no puedo encontrar una manera de hacerlo. Aquí está mi css para activo.

CSS: (por favor, avíseme si necesitará más de mi CSS)

 #navigation a:active { color: #000; background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); border-bottom-width:0px; } 

Gracias, / Pyracell

Desde su enlace de demostración en los comentarios de otra respuesta, JavaScript no será de ninguna ayuda, debe hacerse en su código PHP. Algo en las líneas de:

 class='active' href='LINK_TO_TAB' > TAB_NAME  

Mencionar que cambiar tabs es redirigir a otra página podría haber ayudado con mejores respuestas desde el principio xD

Dependiendo de su código y de cómo está creando las tabs, necesita cambiar this_tab_is_selected a un código que devuelve true para la pestaña seleccionada.

PD. Aún necesita hacer la modificación mencionada en la otra respuesta en su CSS. (Lo cual es cambiar #navigation a:active a #navigation a.active )

Agrega y elimina una clase cuando seleccionas un enlace de pestaña.

 #navigation .active { color: #000; background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); border-bottom-width:0px; } 

y use el script ( versión jQuery )

 $(function(){ $('#navigation a').click(function(){ $('#navigation .active').removeClass('active'); // remove the class from the currently selected $(this).addClass('active'); // add the class to the newly clicked link }); }); 

Una forma cruda de hacer esto con JavaScript (jQuery)

  $('a[href]').each(function() { if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href) $(this).addClass('active'); }); 

¿Cómo estás implementando las tabs? como múltiples páginas HTML diferentes? La pseudoclase :active solo se aplica cuando un enlace está ‘activo’, lo que generalmente significa ‘hacer clic en’. Si está implementando las tabs como múltiples páginas HTML, probablemente desee asignar una clase de CSS como “CurrentTab” a la pestaña que representa la página en la que el usuario se encuentra actualmente, y aplique su border-bottom-width:0px a ese clase.

la práctica que generalmente se sigue es aplicar una clase a la pestaña seleccionada actualmente, p. ej. class = “selected” y luego modificar su CSS para apuntar a esa clase

 #navigation a.selected 

Asi no es como funciona esto. El selector activo coincide (como notó) con un enlace que actualmente recibe un clic (= está activo / trabajando). Lo que quiere, es un selector para la página activa. Necesitarás usar una clase css normal allí, así:

 #navigation a:active, #navigation a.active { color: #000; background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); border-bottom-width:0px; } 

Cosas como esta deben hacerse con una instrucción if usando código como PHP.

Por ejemplo, si hace clic en un enlace obtiene su nueva página, establezca una variable de página, algo así como:

 $page = "Home"; 

A continuación, utilice una instrucción if para agregar o eliminar clases / ID CSS adicionales para modificar el estilo, por ejemplo

 if ($page == "home") { Home About } else if ($page == "About") { Home About }