0

JqueryのLIナビゲーションでの「アクティブ」クラスの削除と追加はpreventDefaultで機能しますが、リンクは機能しなくなりました

Jqueryがliノードへのアクティブクラスの追加を削除して機能しない

現在のページのナビゲーションアイテムを強調表示するために、アクティブクラスを削除してliに追加することは本当に基本的なことですが、それを機能させることができませんでした。

e.preventDefault（）を使用して機能させる必要があることがわかりましたが、リンクは機能しませんが、強調表示されたナビゲーションアイテムは機能します。PreventDefault（）を削除すると、ナビゲートされますが、強調表示されません。私のナビゲーションはheader.phpインクルードファイルにあります。これが私が持っているものです：

<ul class="myNav">
  <li><a href="index.php">Home</a></li>
  <li><a href="portfolio.php">Portfolio</a></li>
  <li><a href="about.php">About</a></li>
  <li><a href="contact.php">Contact</a></li>
</ul>

$('.myNav li a').click(function (e)
{
  e.preventDefault();
$('.myNav li').siblings().removeClass('active');
$(this).parent().addClass('active');
//var url = $(this).attr("href"); 
//window.location = url;
});

クリックしたURLにページを送信しようとしましたが、正しいページが読み込まれますが、クラスが削除されます。これを解決したいのですが、なぜ正しく動作しないのかも理解したいと思います。

4

5 に答える 5

2

onlyjQueryを使用して、ハイライト表示とページへのリダイレクトの両方を同時に行うことはできません。たとえば、ページにこの行を追加するなど、ページのactiveそれぞれにクラスを追加してみてください。liindex.php

  <li class="active"><a href="index.php">Home</a></li>

のみを使用してメニューの状態を保持することはできないためですjQuery。ページのこのメニューセクションが次のような別のファイルにあるheader.php場合は、現在のページがどれであるかを検出する必要があります。そして、phpで現在のページを簡単に検出class="active"し、それに対応してそれliを強調表示するために追加できます。

于 2012-05-21T19:45:08.037 に答える
1

ページの外に移動すると、javascriptで行ったことはすべて失われます。唯一の方法は、サーバープログラムが「アクティブ」フラグを設定することです。おそらく、リンクにクエリパラメータを追加するか、プログラムのURLを確認します。

于 2012-05-21T19:43:19.707 に答える
1

PHPでこれを行うには、現在のURLを検出し、ナビゲーション内のノードのURLと比較します。これを確認してください：Windows / IISサーバーで現在のページの完全なURLを取得するにはどうすればよいですか？

于 2012-05-21T19:44:21.377 に答える
1

私は次のようにPHPでそれを行うことになりました：

<?php
//grab the current page name to use in the
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
?>

        <li<?php if ($page == 'index') echo 'class="active"';?>><a href="index.php">Home</a></li>
    <li <?php if ($page == 'portfolio') echo "class='active'"; ?> ><a href="portfolio.php">Portfolio</a></li>
    <li <?php if ($page == 'about') echo 'class="active"'; ?> ><a href="about.php">About</a></li>
    <li <?php if ($page == 'contact') echo 'class="active"'; ?> ><a href="contact.php">Contact</a></li>
于 2012-05-24T10:23:38.957 に答える
0 
var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#menuInner li a.active').removeClass('active');        // remove class 'active'
$('#menuInner li a[href$="'+link+'"]').parent().addClass('active');// and add it to a matching
于 2013-02-20T07:11:18.667 に答える