Question

我有一个导航栏，其中所选类别应该具有其他css，如颜色和背景。在页面顶部，我包含了谷歌图表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>'; }

要更改有效的导航栏项目，我使用名为＆＃39; active＆＃39;并在用户点击某个项目时进行设置。

代码：

$(document).ready(function () {

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

问题： 如果我点击一个带有空白链接的导航栏项目（＆＃39;＃＆＃39;），请设置并删除课程“活动”。工作得很好。如果我单击第一个发送PHP-GET-Variable的Item，则该类将被删除并设置为单击的Item 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项。

所以看起来该页面完全重新加载 AFTER Javascripts会激活。

有什么想法吗？

Answer 1

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

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

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

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

PHP-GET + Jquery add / removeClass

1 个答案: