0

このコードは 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 は、アクティブなクラスを li に追加します。最初の答えは私にとってはうまくいきます。

4

2 に答える 2

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');
        }
    });
});
于 2013-10-28T01:35:59.137 に答える
0

あなたのコードで：

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

});

"this" は、li ではなく "ul li a" 要素を指します。

$(this).closest('li')byを置き換える$(this).parent()と、質問に答えるはずです。

大きな編集：

私は間違っていた：

あなたの問題は、ナビゲーション バーがリンク (<a href="a url...file.php"\>) であることです。どのliがアクティブであるかをphpコードに保存する必要があります。Jsを使用する必要はありません。

Javascript は、別のページを読み込まない (ページのコンテンツを Ajax で更新する) 場合にのみ役立ちます。

たとえば、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 ...
于 2013-10-28T01:01:32.650 に答える