メニューに.activeクラスを追加したときに正しく動作しない

.activeクラスをjavascriptを使用して私のPHPウェブサイトのメニューに追加しようとしていますが、リンクをクリックすると非常に短時間で.activeが追加されます。それはメニューに.activeクラスを追加したときに正しく動作しない

 $(document).ready(function(){$(document).on('click','ul li a',function(){ $('li a').removeClass("active"); 
     $(this).addClass("active"); 
}); });

それを削除し、リンクをクリックすると、メニューのコードが

<ul class="nav ls navbar-nav "> 
<li><a href="<?php echo SITE ?>contact_us.php" class="active">İletişim</a></li> 
     <li><a href="<?php echo SITE ?>gallery.php">gallery</a></li> 
    </ul>

出典

2017-04-17 Muhammad Khaled

ページは、ナビゲーションをクリックした後、再読み込みなっていますか？ –

リンクをクリックするとページのナビゲーションが発生する（つまり、ページが再読み込みされる）ためです。 – nnnnnn

JavaScriptが唯一のページに現在あるものに影響します。 jQuery "addClass"を使用すると、ページをリロードすると、HTML全体がリセットされ、.activeクラスが失われます。

JavaScriptの代わりに、バックエンドでPHPを使用して、ブラウザが現在表示しているページを検出する必要があります。以下のコードは、必要なjQueryを保持しますが、PHP関数 "create_nav_link"を使用して現在のページを検出し、リンクに 'class = "active"を追加します。

以下の<スクリプト>セクション全体を削除しても、コードは引き続き動作します。

試してみてください貼り付け&をコピーし、コメントで私の質問をお気軽にお尋ねくださいする：

<html> 
<head> 
    <style> 
     a { 
      color : #000; 
     } 

     a.active { 
      color : #F00; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<ul class="nav ls navbar-nav "> 
    <li><?php create_nav_link('/contact_us.php','İletişim') ; ?></li> 
    <li><?php create_nav_link('/gallery.php','gallery') ; ?></li> 
</ul> 
<?php 

    function create_nav_link($url,$label) { 

     echo '<a href="' . $url . '"' ; 
     if ($_SERVER['REQUEST_URI'] == $url) echo ' class="active"' ; 
     echo '>' . $label . '</a></li>' ; 

    } 

?> 
<script> 
    $(document).ready(function() { 
     $(document).on('click', 'ul li a', function() { 
      $('li a').removeClass("active"); 
      $(this).addClass("active"); 
     }) 
    }); 
</script> 
</body> 
</html>

出典

2017-04-17 07:34:32 sammysaglam

であると、URLの変更（つまり、ページをリロード）とHTMLのリセット後 - >そう、あなたが失います.activeクラス。

これを試してみてください：

<script> 

    $(document).ready(function(){ 
     $(document).on('click','ul li a',function(){ 
      $('li a').removeClass("active"); 
      $(this).addClass("active"); 

      // without this below, the click on the link changes 
      // the page, so the HTML gets reset 
      return false ; 
     }) 
    }) ; 

</script>

出典

2017-04-17 07:12:35 sammysaglam

大変ありがとうございます。.activeクラスが追加されましたが、ページがロードされませんでした。リンクをクリックしたときにページがロードされませんでした。 –

@MuhammadKhaled私はあなたが新しいページを開きたいと思っています。滞在する - >これは正しいですか？ – sammysaglam

はい@ sammysaglam正しい@サミサグラム –

メニューに.activeクラスを追加したときに正しく動作しない

答えて

関連する問題