Asignar CLASS según la Página

[rodeirojg]

Hola gente del Foro!

Soy nuevo por acá, básicamente me suscribí porque veo muchas dudas que la gente tiene sin resolver, al igual que yo las tengo y nunca encuentro las respuestas por mis propios medios.

En este caso voy a traer un concepto que ví posteado varias veces en el Foro pero que a mi entender nunca tuvo solución y que a muchos de seguro les interesaría conocer.

Diseñé la web buscosocios.net, pero encuentro dificultades con los objetos dinámicos. El problema está en que en la [URL="http://www.buscosocios.net/buscosocio.php"]sección de Anuncios[/URL] existen varias páginas y yo tendría que señalar el número de página en la que me encuentro con un estilo diferente.

Actualmente el proceso lo hago manual, es decir que si me encuentro en la página 10, a esa página le asigno una clase determinada, mientras que al resto les asigno otra diferente.

Dicho en ejemplo, si tuviera 3 páginas sería así:

Propiedades "pag1.php":
<a href="pag1.php" class="seleccionado">1</a>
<a href="pag2.php" class="deseleccionado">2</a>
<a href="pag3.php" class="deseleccionado">3</a>

Propiedades "pag2.php":
<a href="pag1.php" class="deseleccionado">1</a>
<a href="pag2.php" class="seleccionado">2</a>
<a href="pag3.php" class="deseleccionado">3</a>

Propiedades "pag3.php":
<a href="pag1.php" class="deseleccionado">1</a>
<a href="pag2.php" class="deseleccionado">2</a>
<a href="pag3.php" class="seleccionado">3</a>

Se podrán imaginar lo caótico que se volvería si pasara a tener 50 páginas?. Es por eso que recurro a algún método que me ayude a que el "class" de un determinado elemento varíe automáticamente según la página en la que me encuentro.

Ví que hay métodos en PHP, CSS y Jquery.
En fin, espero no haberlos agobiado demasiado!

[cristian_cena]

Si bien este subforo es frecuentado por usuarios que entenderán tu problemática, no es el lugar indicado (lo cual no es un pecado, sino que limitas las posibilidades de obtener buenas respuestas), ya que el trabajo que pretendes hacer con las clases no pertenece al espectro que abarca css, sino que es un tema que debe ser tratado con un lenguaje de programación.

Según el caso, no alcanzo a distinguir si se trata de un menu o del paginador del buscador, podrías resolverlo usando una lista (array) y una variable "contador" que le pasarás como índice cuando recorras dicha lista. O con un condicional, ya que el numero de la pagina actual lo tienes (creo al menos, sino, nada más lo retornas y lo colocas en una variable. si es para javascript es conveniente usar json), solo debes preguntar si el numero (del paginador) es igual al numero de la pagina (variable que retornaste) (if) o si no es (else) y en base a eso colocar la clase "seleccionado" o no colocar nada. Yo lo haría con una sola clase, es decir, no usaría "deseleccionado", el valor de esta lo incluiria como valor por defecto.

Estas trabajando con php no? si es así y queres hacer el efecto con javascript podes usar json_encode()
Sino simplemente tratas esa variable con php.
Saludos.

[rodeirojg]

Muchas gracias por la respuesta!
Para que se termine de entender, básicamente lo que intento es que el valor "Class" que tenga una determinada palabra cambie, si estás visitando una página X.html. Algo así como:

La palabra "Vínculo 1" va a cambiar su Class a Class="Opcion_2" Si estoy posado en la página Ventas.html. De lo contrario va a llevar el Class="Opción_1"

Sugerís entonces que mueva el tema a la sección de programación del foro?

[cristian_cena]

Seria bueno saber con que lenguaje/s estas trabajando. Es decir, podes hacerlo "a mano" por cada archivo html pero te vas a volver loco y mantener ese código sería una pesadilla.

Te dejo un ejemplo con javascript, donde la variable "pagina" representa la pagina activa. Variable que simplemente podrías incrementar/decrementar, o que además pasarás por get/post al servidor en caso de que operes de ese lado. Por eso, repito, es muy importante saber con que estas trabajando y si tu problema es con el menu o con el paginador.

Código HTML:

<a href="pag1.php">la clave</a>
<a href="pag2.php">esta en la</a>
<a href="pag3.php">variable "pagina"</a>
<!-- enlaces.length será igual a 2, o sea, tres elementos contando desde el cero. -->
 

Código CSS:

a{  /*por defecto desactivo*/
    padding: 0.3em;
    background: whitesmoke;
}
.seleccionado{
    /*estilo para el enlace activo*/
    background: yellowgreen;
}
 

Código Javascript:

var pagina = 1; // empieza a contar de uno
//  pagina = prompt("ingrese el nro de pag."); // o le preguntamos al usuario
 
var seleccionado = "seleccionado"; //nombre de la clase activa. Por defecto se ve desactivo, mirar el css.
var enlaces = document.getElementsByTagName("a"); //todos los enlaces
    
window.onload = function(){ //cuando cargue la pagina...
    if(pagina >= 1 && pagina <= enlaces.length){ //validamos la variable pagina.
        pagina = pagina - 1;  // porque los arrays empiezan a contar de cero.   
        for(i=0; i<enlaces.length; i++){ //recorremos los enlaces
            if(i == pagina){ //cuando el indice sea igual a la variable pagina
                enlaces[i].className = " seleccionado"; //añadimos la clase
            }
        }
    }
    else{
       //si la pagina no corresponde con la cantidad de enlaces.
    }
}
 

Independientemente del lenguaje la logica sería:

• disponer de una variable contador (en nuestro caso "pagina") para incrementar/decrementar la pagina actual.
• Si consultas una base de datos y pretendes hacer un listado de registros: entonces retornar un límite (en sql con el comando "LIMIT"). Con lo cual tendras el numero de registros por pagina.
• retornar la cantidad de registros totales y dividirlo por la cantidad de registros por paginas para obtener la cantidad de paginas (en nuestro ejemplo "enlaces").

tip: usamos la propiedad "length" de los arrays javascript para obtener la cantidad de paginas. Para hacer lo mismo en php debes usar la funcion .count()
Luego, estes donde estes, el trabajo con arrays, bucles y condicionales, salvando algunas distancias de sintaxis tal vez, te será muy similar.

A estas alturas ya el tema se disparó del alcance de css como tal, dependiendo tu lenguaje será el foro que te convenga.
Espero haber sido de ayuda.

Saludos.

[furoya]

Hola rodeirojg, cristian_cena.

Iniciado por FdW/rodeirojg

Última edición por rodeirojg; Hoy a las 02:54 Razón: El editar la redacción por error, me eliminó el enlace hacia la web que pretendo corregir

No me queda muy claro qué quisiste decir. Si te refieres a que no te dejan poner tu enlace, es lógico. Es un método que tiene el Foro para dificultar que uses un tema como excusa para promocionar o sumar clicks a tu web, poniéndola como ejemplo de una pregunta.

Lo de la consulta en particular, lo estuve pensando con CSS, de una forma muy extraña. pero no va a salir. Puede que consulte el asunto con alguien que sepa más que yo (dos tercios de Foro, más o menos), pero de momento la solución es usar lenguaje de programación.
Apoyo fervorosamente la moción del Colaborador cristian_cena para que muevan el tema a un subforo más apropiado.

Y ya que se empezó con JS, quería agregar otro ejemplo un poco más elemental, pero no menos útil.

Si no entiendo mal, la idea (ya repetida y solucionada hace rato) es que en un menú que contiene todos los enlaces a las distintas páginas del sitio, se destaque en otro formato el que corresponde a la página que se está mirando.
Por lo general, ese link se elimina. Y eso sería también un formato. Pero por cuestiones de diseño, a veces hay que mantener el texto o la imagen que sirven de marca de enlace.

Supongamos que tenemos éste menú HTML

Código:

<a href=http://www.mi_sitio.inet/index.php/ class=menu id=index>INDEX.</a> <br>
<a href=http://www.mi_sitio.inet/gallery.php/ class=menu id=gallery>GALLERY.</a> <br>
<a href=http://www.mi_sitio.inet/sitemap.php/ class=menu id=sitemap>SITEMAP.</a> <br>

Cuyo CSS sería

Código:

.menu { backgound-color: lime; }

Simplemente con agregar un JS que leyera el nombre de la página y usara la cadena para apuntar al identificador del enlace, ya le puede cambiar el formato. O su clase, pero aquí es más fácil agregar el CSS inline vía javascript.

Código:

function pagina(){
var pag = location.href.substring(location.href.lastIndexOf('/')+1, location.href.lastIndexOf('.'));

//alert(pag);

document.getElementById(pag).style.backgroundColor = "red";
}
onload = pagina;

Si termina en PHP (p.e.), supongo que estas opciones tampoco estarán de más.

[rodeirojg]

Simplemente MA-RA-VI-LLO-SO!!! CASO RESUELTO!
Increíble la respuesta de ambos, muchísimas gracias.

En este caso me quedé con la opción de furoya, pero también es válida la propuesta de cristian_cena.

Ya estuve aportando algunas soluciones en el Foro, realmente se pone interesante la ayuda mutua que se recibe por acá.

Nuevamente, gracias!!!