Class según página

[rodeirojg]

Buenas tardes gente adorable del foro!

Hace un tiempo atrás encontré la solución para cambiar el estilo en páginas sucesivas (página 1, página 2, etc) pero no encontré aún la manera de cambiar el estilo (class) sin importar el nombre de la págna.

El tema es: ¿cómo hago para que el estilo cambie según la página en la que me encuentro, de manera que si estoy en Home, ese texto tenga un color diferente a FAQ y a Contacto?

Mi caso sería así:

Código HTML:

<ul id="navi">
	<li class="home"><a href="index.php">Home</a></li>
	<li class="FAQ"><a href="FAQ.php">Preguntas Frecuentes</a></li>
        <li class="contacto"><a href="contacto.php">Contacto</a></li>
</ul> 

[cuasatar]

Pues curiosamente me toca hacer algo parecido a lo que dices, es decir que si estas en la sección FAQ el fondo sea de un color diferente al de los demas para que la gente sepa que es la sección actual. Aun no lo he desarrollado pero la cosa seria algo asi como esto:

Primero tomas el valor de la url y lo obtienes con GET (ejemplo index.html, faq.html, etc)

Defines dos estilos un estilo con letra blanca y otro con letra negra (por ejemplo) y supongamos que la negra sera la que sera la seccion actual.

A mi se me ocurre que con javascript se podria obtener el elemento con id igual al obtenido en la url y a ese se le añadiria la clase letra negra.

Las otras quedarian con la clase por defecto con la clase letra blanca.

Igual es una idea asi al aire. Si a alguien se le ocurre alguna mejor idea que la comente, que igual a mi tambien me sirve

[rodeirojg]

Exactamente cuasatar, la idea sería poder reconocer la url para asignarle un class según la página en la que me encuentro.

En algún momento probé con javascript y estaba bien el desarrollo, pero como dije, sólo servía para páginas que eran una consecutiva a la otra, por ende no sirve en el caso que quisiera poner diferentes nombres a las páginas (inicio, contacto, FAQ, etc)

Te dejo el código por si te sirve de algo:

Código PHP:

  <script type="text/javascript">
function pagina(){
var pag = location.href.substring(location.href.lastIndexOf('/')+1, location.href.lastIndexOf('.'));
 
//alert(pag);
 
document.getElementById(pag).style.textDecoration="underline";
document.getElementById(pag).style.color="#25a4bf";
document.getElementById(pag).style.fontWeight="bold";
document.getElementById(pag).style.fontFamily = "Arial, Sans";
document.getElementById(pag).style.fontSize = "14px";
 
}
onload = pagina;
</script> 
  

[cuasatar]

Con este script puedes obtener el nombre completo de la web actual. Ya solo seria cuestión que lo filtres y con eso ya puedes hacer tu función. No es muy dificil. Ya lo hare mañana que ahora estoy muy cansado. Gracias por el aporte, si era algo parecido a lo que suponia.

http://webcheatsheet.com/php/get_current_page_url.php


Igual tambien te deberia funcionar asi

Código PHP:

  echo $url= $_GET['url'];
echo $url; 
   

Ya es cosa de que lo pruebes y lo adaptes.

Igual en lugar dfe colocarle uno por uno las caracteristicas de estilo crea una clase completa y con className le colocas todo en un solo llamado.

[DoHITB]

Buenas!

Yo también tengo un tema así... jeje.

En realidad era un poco diferente porque los textos variaban con parámetros GET, pero para el caso creo que será lo mismo...

Yo haría algo así:

Código:

$vals = array("home", "FAQ", "contacto");
$href = array("home", "FAQ", "contacto");

if($_GET['url'] == "home){$vals[0] .= "_select";}
elseif($_GET['url'] == "FAQ"){$vals[1] .= "_select";}
elseif($_GET['url'] == "contacto){$vals[2] .= "_select";}

for($i=0;$i<count($vals);$i++){
    echo("<a href=".$href[$i]." class=".$vals[$i].">".$href[$i]."<a/>
}

Esto es un esbozo rápido; seguro que lo puedes adaptar mejor a las necesidades de tu web

Espero te sirva.

Saludos!

[cuasatar]

Bueno, asi con las ideas de todos cree la solución en jquery. Es muy sencilla así que supongo que no implicara mayor problema entenderla.

Código Javascript:

$(document).ready(function(){
$("menu ul li#<?php echo $pageid;?>").addClass("current_page_item").show();
});
 

Como ven es supremamente sencillo simplemente se le esta diciendo que el menu esta contenido dentro de un div llamado menu (vaya redundancia ), entonces que el elemento li cuyo id sea igual a $pageid se le adicione la clase current_page_item. Por supuesto si la pagina se llama megafonos.html por decir algo se filtra para tener solo megafonos y su id asociado debe llamarse megafonos.

Con el enlace que les deje ayer ya pueden averiguar como obtener la url de la pagina actual en php asi que no redundare en ello.