将活动类添加到菜单项答案

【问题标题】：Add active class to menu item将活动类添加到菜单项
【发布时间】：2017-07-01 05:29:59
【问题描述】：

使用 Bootstrap 4 v6，我有以下导航：

我正在尝试在所选菜单项上设置活动类，但我所做的一切都没有奏效。

我最接近的是这段代码：

$(document).ready(function() {
$('.navbar ul li').click(function(e) {
    $('.navbar ul li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">DCH</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.php">Home</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Feline Diabetes</a>
                <div class="dropdown-menu bg-inverse navbar-inverse">
                    <a class="dropdown-item" href="treatment.php">Treatment</a>
                    <a class="dropdown-item" href="insulin.php">Insulin and Testing</a>
                    <a class="dropdown-item" href="relatedconditions.php">Related Conditions</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="nutrition.php">Nutrition</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="protocol.php">Protocol</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="links.php">Links</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://diabeticcathelp.com/forum" target="_blank">Forum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.php">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

它确实将活动类更改为单击的菜单项，但不会更改页面。它也不适用于子菜单项，但我认为我需要不同的代码来查看是否单击了这些特定项目并且我还没有做到这一点。首先，我想解决页面切换问题。如果我删除 e.preventDefault() 调用，则页面会移动，但菜单项不会更改为活动状态。

关于如何完成这项工作的任何想法？

更新。除了子菜单之外，我对所有东西都有效。我正在使用以下代码，该代码改编自此线程中的答案之一：

$(document).ready(function () {
    var listItems = $('.navbar ul li');

    $.each(listItems, function (key, litem) {
        var aElement = $(this).children(litem)[0];

        if(aElement == document.URL) {
            $(litem).addClass('active');
        }
    });
});

我唯一缺少的是向子菜单项添加活动。此代码获取 .navbar ul li 项的第一个子项并进行比较以查看是否需要添加活动类。我知道当我有一个 .nav-item .dropdown 类的 li 时，我需要遍历 .dropdown-menu 的子项，并在那里检查。我只是在努力弄清楚如何。我真的需要学习 JQuery 课程。

进一步编辑：

玩了几个小时后，我有了一个适合我正在尝试做的事情的解决方案：

var setSubItemParent = false;

$(document).ready(function () {
    var listItems = $('.navbar ul li');

    $.each(listItems, function(key, litem) {
        iterateLinks(litem);
    })
});

function iterateLinks(liItem) {
    var divchildren = $(liItem).children('div');

    setSubItemParent = false;

    /* If there are div children, iterate them */
    if (divchildren.length > 0) {
        iterateLinks(divchildren[0]);

        /* If an item was set and we're in a div, add active to 
           this element as well. */
        if(setSubItemParent) {
            $(liItem).addClass('active');
        }

    }
    else {
        var achildren = $(liItem).children('a');

        /* Run through all a tags and see if they should be active */
        if (achildren.length > 0 ) {
            $.each(achildren, function(key, achild) {
                if (achild.href == document.URL) {
                    $(achild).addClass('active');
                    setSubItemParent = true;
                }
            });
        }
    }
}

代码遍历菜单中的所有 li 元素，如果找到 div 则进一步挖掘。这可能不是解决问题的最可靠的解决方案，但它确实有效。不过，我愿意接受更好的解决方案。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

您可以遍历链接并检查链接的 href 是否与文档 URL 匹配，然后将活动类添加到链接（或在 li 中）。

$(document).ready(function () {
  const $links = $('.navbar ul li a');
  $.each($links, function (index, link) {
    if (link.href == document.URL) {
      $(this).addClass('active');
    }
  });
});

【讨论】：

【解决方案2】：

看起来您的链接加载了一个新的 php 页面，因此加载它们将重置您在单击处理程序中添加的类。您应该在您的 php 代码和 html 模板中的服务器端处理此问题。例如，在您的 Nutrition.php 文件的代码中，添加一个名为 $nutrition_active 的变量设置为 TRUE。在您的导航模板中，您需要为每个链接添加一个 if 条件，以检查您为每个页面设置的变量：

<li class="nav-item <? if ($nutrition_active) { ?>active<? }?>"><a class="nav-link" href="nutrition.php" >Nutrition</a>

【讨论】：