Question

我在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>

在index.php中

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

结果：http://lazaro.inf.uct.cl/~dacanalesc/registratusmarcas/

并且在menu.js中将set li的方法设置为动态激活，但没有任何工作

示例：

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

我的问题是：在另一个页面中使用mi菜单，并在主页面中包含它。需要在li上放置活动类的其他方法吗？

编辑： Twitter Bootstrap add active class to li 第一个答案对我有用。

Answer 1

我遇到了同样的问题，所以我制作了这段代码

更好的代码

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

和

我先做了这个

$(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');
        }
    });
});

Answer 2

在您的代码中：

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

});

“this”指的是“ul li a”元素，而不是li。

$(this).closest('li')替换$(this).parent()应该回答您的问题。

BIG EDIT：

我错了：

您的问题是您的导航栏li是链接（＆lt; a href =“a url ... file.php”\＆gt;）。你必须存储li活跃的php代码。您不必使用Js。

仅当您不加载其他页面（使用Ajax刷新页面内容）时，Javascript才有用。

例如，在registrar_tiempo_carrera.php中，您可以设置：

$current_nav_li = 0;

在ver_tiempo_carrera.php中你可以设置：

$current_nav_li = 1;

你写左侧菜单的地方：

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页面包含并设置动态活动li

2 个答案: