javascript - PHP-GET + Jquery 添加/删除类

Question

我有一个导航栏，其中所选类别应该有其他 CSS，如颜色和背景。在页面顶部，我包含了一些来自 google charts API 的函数，我也使用了 bootstrap。

代码:

<?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>    

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

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

有什么想法吗？

Answer 1

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

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

javascript 将第一个元素设置为事件状态，就在页面重新加载之前，这就是为什么你会看到它“像一秒钟一样”处于事件状态，然后当页面重新加载时，默认事件状态将再次成为第二个。

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