更改菜单项的活动类[关闭]答案

【问题标题】：change active class of menu item [closed]更改菜单项的活动类[关闭]
【发布时间】：2018-02-12 15:32:18
【问题描述】：

我目前正在做一个汽车租赁网站的模拟考试。我和我的朋友一起工作。开始制作管理页面时，我遇到了更改菜单项上的活动类的问题。尝试了很多，但还没有成功。我的问题是如何使用 Javscript 更改菜单项上的活动类？

以下代码来自管理页面 php 文件中的 nav.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 的removeClass 和addClass。 api.jquery.com/removeclass, api.jquery.com/addclass
如果我加载了该页面，我希望菜单项处于活动状态。我认为问题可能是由函数 loadQueryResult 引起的。此函数在容器流体中加载页面的内容。我不是 100% 确定这是问题的原因
这是我目前在控制台中看到的： admin-page-2.php:100 Uncaught ReferenceError: $ is not defined at admin-page-2.php:100 。

标签： javascript php css twitter-bootstrap twitter

【解决方案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>

全屏试试。

【讨论】：

非常感谢您提供这个答案。这确实解决了我的问题。

【解决方案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() 函数将链接作为参数。

【讨论】：

【解决方案3】：

Ik merk op dat er Nederlandse cmets staan en zal dus bij deze snel 即使在 het Nederlands verder helpen。

Bij onderstaande regel wordt op hetzelfde element de active class verwijderd en terug toegevoegd.

$this.parent().siblings().removeClass('active').end().addClass('active');

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

bv:

  $('.navbar > ul.nav li a').click(function(e) {
        var $this = $(this);
        for ( var i = 0; i < navlink.length;i++){
        var $element = $('.nav-link')[i]; 
        $element.removeClass('active');
        }

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

【讨论】：

【解决方案4】：

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

@php

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

@js

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

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

如果你使用php加载页面

【讨论】：