更改菜单项的活动类

Question

我目前正在进行汽车租赁网站的练习考试。我和我的朋友一起工作。开始制作管理页面我遇到了一个问题，即更改菜单项上的活动类。尝试了很多，但没有成功。我的问题是如何使用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>

Answer 1

你可以用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>

全屏试用。

Answer 2

只需使用jQuery添加和删除类函数。

添加课程：

var $element = $('.nav-link')[0]; // 0 being the index of the nav-links found
$element.addClass('active');

删除课程：

var $element = $('.nav-link')[0];
$element.removeClass('active');

你也可以做一些更加时髦的事情;）

function ToggleActive(link)
{
    var $element = $('.nav-link[href="'+link+'"]');
    $element.addClass('active');
}

ToggleActive('admin-page-2.php');

ToggleActive()函数将链接作为参数。

Answer 3

Ik merk op dat er Nederlandse评论staan​​ en zal dus bij deze snel甚至在Nederlands verder helpen。

Bij onderstaan​​de regel wordt op hetzelfde element de active class verwijderd en terug toegevoegd。

$ this.parent（）的兄弟姐妹（）removeClass（＆＃39;有源＆＃39）。。。。（）结尾addClass（＆＃39;有源＆＃39）;

Wat je echter beter kunt doen is op alle items de active class te verwijderen en enkel op het geclickte element hem terug toe voegen。

BV：

catch

Answer 4

使用php添加活动页面的名称#home

@php

<?php
 $active = 'home';
?>

@js

var active="<?php echo $active;?>";

$(document).ready(function(){
  $("#"+active).addClass("active");
});

如果您使用php加载页面