2011-12-12 10 views
12

Así que he buscado SO durante una hora tratando de encontrar la respuesta, y también trató diversos métodos, including thisPHP conjunto de enlaces activos en la página utilizando incluye

Estoy tratando de incluir mis páginas, junto con la navegación. Pero en la página correcta, necesito que el elemento de la lista tenga una clase de active. La navegación está en header.php y en la actualidad se ve así:

<nav> 
    <ul> 
     <li class="active"> <a href="/">Home</a> </li> 
     <li> <a href="#">Apps</a> </li> 
     <li> <a href="#">Forums</a> </li> 
    </ul> 
    </nav> 

En primer lugar, no tengo ni idea de si JS (jQuery) sería mejor, o si PHP fue a ser mejor. Ambos no importarían si funciona.

También soy un poco nuevo con PHP y trato de aprender.

¿Cuál sería el método más fácil (con suerte) de usar? Así que no tengo que cambiar un montón de código sólo para dar un sistema de navegación class="active"

+0

¿Cómo se obtienen los valores para establecer la clase activa en esa página, está utilizando la variable de cadena de consulta para obtener la identificación de la página. algo así como ** exmaple.com? page_id = Apps ** – punit

+0

No soy tan avanzado en PHP todavía ... Realmente son solo páginas estáticas con PHP. – nowayyy

Respuesta

25

Asumming tiene una variable $page (que contiene el nombre de la página que se encuentra actualmente):

<nav> 
    <ul> 
     <li class="<?php echo ($page == "home" ? "active" : "")?>"> <a href="/">Home</a> </li> 
     <li class="<?php echo ($page == "apps" ? "active" : "")?>"> <a href="#">Apps</a> </li> 
     <li class="<?php echo ($page == "forums" ? "active" : "")?>"> <a href="#">Forums</a> </li> 
    </ul> 
    </nav> 
+1

¿Podría explicar cómo se vería la variable $ page? y ¿la variable estaría en el archivo inc o en la página en la que voy a incluir el navegador? Realmente nuevo para PHP aquí. – nowayyy

+4

si coloca ' 'en la página principal incluida, Home se configurará como activo. No olvides configurar el CSS tampoco. – Prisoner

0

si está utilizando la cadena de consulta exmaple.com?page_id=Apps para pasar la identificación de la página que con php puede acercarse a esta cosa

$ page_id = $ _REQUEST ['page_id'];

<ul> 
      <li class="<?php echo ($page_id == "Home" ? "active" : "");?>"> 
<a href="/">Home</a> 
      </li> 
      <li class="<?php echo ($page_id == "Apps" ? "active" : "");?>"> 
<a href="#">Apps</a> 
      </li> 
      <li class="<?php echo ($page_id == "Forums" ? "active" : ""); ?>"> 
<a href="#">Forums</a> 
      </li> 
     </ul> 
+0

Eso es demasiado fácil de piratear :-P – Neal

+0

@neal No sé cómo está obteniendo el nombre de la página actual, es solo una idea para abordar. – punit

0

En la página uso de cabecera:

<?php $loc = this.location; ?> 

A continuación, en cada enlace añadir:

<?php(this.href == $loc) ? echo 'class="active"' : '' ?> 
8

Aquí es una manera simple en el que no es necesario añadir cualquier otra variable

<li class="<?php echo ($_SERVER['PHP_SELF'] == "/index.php" ? "active" : "");?>"> 
<a href="index.php">Start</a> 
</li> 
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/about.php" ? "active" : "");?>"> 
<a href="about.php">About</a> 
</li> 
<li class="<?php echo ($_SERVER['PHP_SELF'] == "/practices.php" ? "active" : "");?>"> 
<a href="practices.php">Practices</a> 
</li> 
0

Si no desea utilizar jQuery o PHP - ca n hacer después:

  1. Dar ID o CLASE diferente para cada elemento <li> en "your-include-nav.php".
  2. Defina el estilo "activo" con CSS en la sección <head>, en cada página.
Cuestiones relacionadas