javascript - 更改菜单项的事件类别

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        2年前关闭。
                                                                                            
                
        
我目前正在制作汽车租赁网站的实践考试。我和我的朋友一起工作。开始制作管理页面时，我遇到了更改菜单项上的活动类的问题。尝试了很多，但没有成功。我的问题是如何使用Javscript更改菜单项上的活动类？

以下代码来自nav.php文件，该文件包含在管理页面php文件中

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <a class="navbar-brand" href="#">Rent an Electric</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
                <a class="nav-link" href="admin-page-2.php">
                    <i class="fa fa-fw fa-dashboard"></i>
                    <span class="nav-link-text">
                Dashboard</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Wagenpark">
                <a class="nav-link" onclick="return loadQueryResult('wagenpark')" href="page_admin.php?wagenpark">
                    <i class="fa fa-fw fa-car"></i>
                    <span class="nav-link-text">
                Wagenpark</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Gebruikers">
                <a class="nav-link" onclick="return loadQueryResult('gebruikers')" href="page_admin.php?gebruikers">
                    <i class="fa fa-fw fa-user"></i>
                    <span class="nav-link-text">
                Gebruikers</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Klanten">
                <a class="nav-link" onclick="return loadQueryResult('klanten')" href="page_admin.php?klanten">
                    <i class="fa fa-fw fa-child"></i>
                    <span class="nav-link-text">
                Klanten</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Facturen">
                <a class="nav-link" onclick="return loadQueryResult('facturen')" href="page_admin.php?facturen">
                    <i class="fa fa-fw fa-file"></i>
                    <span class="nav-link-text">
                Facturen</span>
                </a>
            </li>
            <
        </ul>
        <ul class="navbar-nav sidenav-toggler">
            <li class="nav-item">
                <a class="nav-link text-center" id="sidenavToggler">
                    <i class="fa fa-fw fa-angle-left"></i>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">

            <li class="nav-item">
                <a class="nav-link" data-toggle="modal" data-target="#exampleModal">
                    <i class="fa fa-fw fa-sign-out"></i>
                    Uitloggen</a>
            </li>
        </ul>
    </div>
</nav>

<script>
    function loadQueryResult(name) {
        $('.container-fluid').load('includes/admin-page/pages/'+ name +'.php');
        return false;
    }

    //Hier moet nog een function komen voor het aanpassen van de li class naar active
    $('.navbar > ul.nav li a').click(function(e) {
        var $this = $(this);
        $this.parent().siblings().removeClass('active').end().addClass('active');
        e.preventDefault();
    });
</script>

最佳答案

您可以使用jquery做到这一点。在导航栏中的元素之一上设置默认的.active类，然后可以使用jQuery依次removeClass和addClass。

$(document).ready(function() {
  $('.navbar-nav li a').click(function(e) {

    $('.navbar-nav li.active').removeClass('active');

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
  });
});

nav ul li.active span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
  <a class="navbar-brand" href="#">Rent an Electric</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
      <li class="nav-item active" data-toggle="tooltip" data-placement="right" title="Dashboard">
        <a class="nav-link" href="#">
          <i class="fa fa-fw fa-dashboard"></i>
          <span class="nav-link-text">
                Dashboard</span>
        </a>
      </li>
      <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Wagenpark">
        <a class="nav-link" onclick="return loadQueryResult('wagenpark')" href="#">
          <i class="fa fa-fw fa-car"></i>
          <span class="nav-link-text">
                Wagenpark</span>
        </a>
      </li>
      <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Gebruikers">
        <a class="nav-link" onclick="return loadQueryResult('gebruikers')" href="#">
          <i class="fa fa-fw fa-user"></i>
          <span class="nav-link-text">
                Gebruikers</span>
        </a>
      </li>
      <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Klanten">
        <a class="nav-link" onclick="return loadQueryResult('klanten')" href="page_admin.php?klanten">
          <i class="fa fa-fw fa-child"></i>
          <span class="nav-link-text">
                Klanten</span>
        </a>
      </li>
      <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Facturen">
        <a class="nav-link" onclick="return loadQueryResult('facturen')" href="page_admin.php?facturen">
          <i class="fa fa-fw fa-file"></i>
          <span class="nav-link-text">
                Facturen</span>
        </a>
      </li>
    </ul>
    <ul class="navbar-nav sidenav-toggler">
      <li class="nav-item">
        <a class="nav-link text-center" id="sidenavToggler">
          <i class="fa fa-fw fa-angle-left"></i>
        </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" data-toggle="modal" data-target="#exampleModal">
          <i class="fa fa-fw fa-sign-out"></i> Uitloggen
        </a>
      </li>
    </ul>
  </div>
</nav>

全屏尝试。