PHP-GET + Jquery 添加/删除类

Question

我有一个导航栏，其中选定的类别应该有其他 css，如颜色和背景。在页面顶部，我包含了一些来自谷歌图表 API 的函数，我也使用了引导程序。

代码：

<?php echo '        
<nav class="navbar navbar-default navbar-schuberth">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Monatsreporting</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="?report=test">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</nav>      
<div class="container-fluid">';

if($_GET['report']=='test') {   
    echo '<div class="row">
    <!--Google REGISTRATION BY PRODUCTS-->
        <div id="barchart_material" class="col-xs-8 col-md-8" style="width: 900px; height: 600px;"></div>
            <div class="erklaerung col-xs-4 col-md-4"><p>Text</p></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12"><p>Text</p></div>
    </div>'; }

要更改活动导航栏项目，我使用了一个名为“活动”的类，并在用户单击项目时设置它。

代码：

$(document).ready(function () {

    $(".navbar li").on("click", function(){
        $(this).siblings('li').removeClass('active');
        $(this).addClass("active");
});
    });

问题： 如果我单击具有空白链接（'#'）的导航栏项目，则设置和删除“活动”类就可以了。如果我单击第一个发送 PHP-GET-Variable 的项，该类将被删除并设置为单击的项 1，但随后该类被删除。

所以为了测试我做了以下：

<nav class="navbar navbar-default navbar-schuberth">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Monatsreporting</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="?report=test">1</a></li>
      <li class="active"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</nav>    

我给第二个项目默认激活的类。因此，当我单击第一个项目时，从 2 中删除的类 active 被设置为 1。但是，像 1 秒后，类 active 再次从项目 1 中删除并设置回项目 2。

所以看起来页面在在 Javascripts 触发之后完全重新加载。

有什么想法吗？

Answer 1

您所描述的行为是完全正常的。它与javascript无关。

实际上，当您单击链接时，页面会重新加载，并且默认设置了 active 类的 li 会变为活动状态。

javascript 在页面重新加载之前将第一个项目设置为活动状态，这就是为什么您会看到它活动“像一秒钟”，然后当页面重新加载时，默认活动将再次成为第二个。

在这种情况下，您不需要 javascript，而是必须在每个请求的 PHP 级别处理活动菜单项。