當我添加.active類菜單它不能正常工作

我想添加.active類菜單在我的PHP網站使用JavaScript，但問題是，當我點擊鏈接，它增加了.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我猜你想要打開新頁面，並且.active類留下來 - >這是正確的嗎？ – sammysaglam

是的@sammysaglam –

當我添加.active類菜單它不能正常工作

回答

相關問題