php page include and set dynamic active li

Question

i have this code in include/menu.php

<div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav side-nav">
         <li><a href="registrar_tiempo_carrera.php"><i class="glyphicon glyphicon-paperclip"></i> Registra tus tiempos de Competencias</a></li>
         <li><a href="ver_tiempo_carrera.php"><i class="glyphicon glyphicon-list-alt"></i> Ver tus Marcas de Carreras</a></li>
         <li><a href="agregar_amigos.php"><i class="glyphicon glyphicon-user"></i> Agrega tus Amigos</a></li>
         <li><a href="ranking.php"><i class="glyphicon glyphicon-globe"></i> Rankings Generales</a></li>
         <li><a href="contacto.php"><i class="glyphicon glyphicon-envelope"></i> Reportar un Problema</a></li>
      </ul>
</div>

In the index.php

 <body>
  <?php include ('include/menu.php'); ?>

Result: http://lazaro.inf.uct.cl/~dacanalesc/registratusmarcas/

and in the menu.js put methods for set li active dynamically, but nothing work

example:

$('ul li a').click(function() {
  $('ul li.active').removeClass('active');
  $(this).closest('li').addClass('active');
});

my question is: with mi menu inside in another page, and in the main page include it. Require other method for put active class on li?

EDIT: Twitter Bootstrap add active class to li the first answer works for me.

score 2 · Accepted Answer · answered Oct 28 '13 at 01:35

2

I faced the same problem so i made this code

Better code

$(document).ready(function () {
    loc = $(location).attr('href');
    $('ul.nav a').filter(function () {
        return this.href == loc;
    }).closest('li').addClass('active');
});

and

i made this one first

$(document).ready(function () {
    loc = $(location).attr('href');
    var n = loc.split("/");
    var n1 = loc.split("/").length;
    var on_page = n[n1 - 1];
    var new_page = on_page.split("?");
    $('ul.nav a').each(function () {
        if ($(this).attr('href') == new_page[0]) {
            $(this).closest('li').addClass('active');
        }
    });
});

answered Oct 28 '13 at 01:35

Tushar Gupta - curioustushar

58,085
24
103
107

This is not a JS problem. – Pierre Emmanuel Lallemant Oct 28 '13 at 01:40
look my post ;) JS would be used if left links were targeting "#" and he uses Ajax. It's not the case. – Pierre Emmanuel Lallemant Oct 28 '13 at 01:41
@PierreEmmanuelLallemant include this script on every page and it will work. I am using the code written in my answer . :).It works man. – Tushar Gupta - curioustushar Oct 28 '13 at 01:42
You are right, sorry, both solutions works and yours is the best, I should have read the js code ;) – Pierre Emmanuel Lallemant Oct 28 '13 at 01:44
@PierreEmmanuelLallemant Good you must keep learning and keep your eyes open . – Tushar Gupta - curioustushar Oct 28 '13 at 01:46

Pierre Emmanuel Lallemant · Answer 2 · 2013-10-28T01:40:01.633

In your code :

$('ul li a').click(function() {
$('ul li.active').removeClass('active');
   $(this).closest('li').addClass('active');

});

"this" refer to the "ul li a" element, not to the li.

Replacing $(this).closest('li') by $(this).parent() should answer your question.

BIG EDIT:

I was wrong:

Your problem is that your navbar li are links (<a href="a url...file.php"\>). You have to store in the php code which li is active. You don't have to use Js.

Javascript is usefull only if you don't load another page (refresh the content of the page with Ajax).

For example, in registrar_tiempo_carrera.php you can set:

$current_nav_li = 0;

and in ver_tiempo_carrera.php you can set:

$current_nav_li = 1;

And where you write the left menu:

if($current_nav_li == 1)
   echo '<li **class="active"**><a href="registrar_tiempo_carrera.php"><i class="glyphicon glyphicon-paperclip"></i> Registra tus tiempos de Competencias</a></li>';
else 
   echo '<li><a href="registrar_tiempo_carrera.php"><i class="glyphicon glyphicon-paperclip"></i> Registra tus tiempos de Competencias</a></li>' 
   ... etc ...

php page include and set dynamic active li

2 Answers2