0

Amigos estoy reforzando mi página web. Cuando quería saber en que página estaba simplemente le ponía la clase active al enlace de la página en la que me encontraba. de este modo:

<a href="contacto.html" class="active"></a>

Bueno lo que sucede es que cuando quiero hacer un cambio...lo tengo que hacer página por página lo que se me hace tedioso. Por eso recurrí ahora a php. Cree una página llamada menu.html con el siguiente codigo:

<div class="menu col-md-8">
    <a href="index.php?">home</a>
    <a href="formatos_imprenta.php">productos</a>
    <a href="caja.php">cajas & bolsas</a>           
</div>

y luego en un php llamado index.php incluí menu.html

<?php include('menu.html') ?>

El problema es que necesito saber en que página estoy. y no se como hacerlo...Me pueden ayudar?

4 respuestas 4

3

Te aporto una mejor opcion (a mi entender) con javascript lo puedes lograr y lo mejor es que puedes escalar el codigo, yo tuve el mismo dilema que tu y logre solucionarlo de la siguiente manera;

NOTA: Requiere Jquery

/**
 * Activar opcion del menu segun la url
 *
 * Optiene el pathname para saber en que pagina esta dependiendo de la url
 **/
$(document).ready(function(){
    var URLactual = window.location.pathname; //utilizada para detemrinar que tab del menu activar

    URLactual = URLactual.split('/').pop();
    URLactual = URLactual.split('.');

    $('.' + URLactual[0] ).addClass('active');

});

Ahora en tu menu solo debes agregar como clase el nombre de la url sin la extencion,ejemplo;

<div class="menu col-md-8">
    <a href="index.php?" class="index">home</a>
    <a href="formatos_imprenta.php" class="formatos_imprenta">productos</a>
    <a href="caja.php" class="caja">cajas & bolsas</a>           
</div>

con esto en el futuro si agregas mas opciones simplemente le agregas como clase el nombre de la url.

Espero te sirva, podría haber una manera mas elegante pero esta es la que actualmente utilizo.

5
  • Pero funciona si esta con include? el 20 ago. 2018 a las 18:05
  • así es, utilizo la misma forma que usas de incluir el menú desde un archivo externo. el 20 ago. 2018 a las 18:06
  • Colocas el js en un archivo externo de scripts y haces el linkeado en cada página. Por cierto, cuando hagas una pregunta, si quieres añadir más detalles puedes editarla y no crear un duplicado el 20 ago. 2018 a las 18:07
  • 1
    en mi caso cree un archivo llamado header.php donde almaceno todos los archivos javascript en común de todas las paginas y de igual manera las hojas de estilo css, con esto solo hago un include en cada archivo y si tengo que agregar algo como un archivo extra pues solo lo agrego en mi archivo header.php el 20 ago. 2018 a las 18:10
  • 1
    Gracias Albert buenísimo tu código me funciono sin necesidad de agregarle o quitarle nada...Muchas gracias. el 20 ago. 2018 a las 19:15
1

Puedes hacerlo utilizando el array superglobal $_SERVER, de la siguiente manera:

<div class="menu col-md-8">
     <a href="index.php" <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="active"';?>>home</a>
     <a href="formatos_imprenta.php" <?php if (strpos($_SERVER['PHP_SELF'], 'formatos_imprenta.php')) echo 'class="active"';?>>productos</a>
     <a href="caja.php" <?php if (strpos($_SERVER['PHP_SELF'], 'caja.php')) echo 'class="active"';?>>cajas & bolsas</a>           
</div>

Un saludo.

0

podrias hacerlo de la siguiente manera

anadimos una clase a tu div que contiene las etiquetas a ejemplo

<div class="menu col-md-8 class" >
    <a href="index.php?">home</a>
    <a href="formatos_imprenta.php">productos</a>
    <a href="caja.php">cajas & bolsas</a>           
</div>

con jquery lo hacemos asi

$(document).ready(function(){

     $(".class a").click(function(){


        $(this).addClass("active");//indentificamos cual a a sido clickeada y le anadimos una clase

   })


})

y con css anadimos algunos estilos para saver en cual estamos

.active{
   border-bottom:solid 1px green;
   font-wight:bold;

}
0

Con el uso del objeto window

Puedes obtener la URL exacta en la que te encuentras en ese momento.

Podrías almacenar este valor en una variable y luego evaluar lo que desees con el.

Por ejemplo:

let direccionActual = window.location.href;

console.log(direccionActual);

let pathActual = window.location.pathname;

console.log(pathActual);

Avisame si a esto es a lo que te referías.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.