将“活动”类附加到引导程序 5答案

【问题标题】：Appending 'active' class to bootstrab5将“活动”类附加到引导程序 5
【发布时间】：2021-12-22 00:30:03
【问题描述】：

我正在开发一个 PHP 项目，但无法将 ClassActive 添加到引导导航栏

    <?php foreach ($category as $cat){echo <li class="nav-item><a class="nav-link" aria-current="page" href="categories.php?pageid='.$cat['ID'].'">'  .$cat['Name']. '</a></li>';}?>

jQuery=>

$('.navbar-nav .nav-item a').click(function(e) {

    $('.navbar-nav .nav-item a').removeClass('active');

    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    //e.preventDefault();
});

【问题讨论】：

当您的问题中没有代码时，您希望我们如何提供帮助？
我不明白你的 if 语句。当你删除上面的活动类时，为什么要检查 obj 是否有活动类？
首先，不要将变量命名为“$this”。接下来一个问题。当您单击一个链接时，您会转到另一个页面吗？在这种情况下，您的 jQuery 代码可以工作，但您永远看不到它，因为您导航离开了您所在的页面。
@GertB。好吧，在 Web 上经常可以看到以 $ 开头的 jQuery 变量命名。它有助于查看哪些是 jQuery 对象而不是普通的 DOM 元素或 javascript 变量。关于访问的链接的好点。但它可能是一个带有标签的链接，可以留在这个页面上并激活一个标签或类似的东西。无论如何，Anas 的问题需要更多关于他想要做什么的细节。根据这一点，一些 CSS 可以在没有任何 JS 的情况下完成工作。
@PatrickJanser 带有 $ 的变量在 js 中使用，对我来说没问题。称它为$this 对我来说是不行的。这是一个非常令人困惑的 varname。称它为var $clickedLink 对我来说不是问题。主题标签链接是我问这个问题是否单击链接访问另一个页面的原因。

标签： php jquery twitter-bootstrap

【解决方案1】：

当您单击导航中的链接时，浏览器将转到该链接。为防止这种情况，您已注释掉该行 (e.preventDefault)。如果应用程序不是单页应用程序，您可以编写一个函数，该函数将在您检查当前 URL 的每个页面加载 [$(document).on('load, ()=>{});] 时执行并将 .active 类添加到相应的元素中。

这里可能的解决方案How do I make Bootstrap navbar change active state?

或者喜欢 GeeksForGeeks 的这段代码

<script>
  
            /* Code for changing active 
            link on clicking */
            var btns = 
                $("#navigation .navbar-nav .nav-link");
  
            for (var i = 0; i < btns.length; i++) {
                btns[i].addEventListener("click",
                                      function () {
                    var current = document
                        .getElementsByClassName("active");
  
                    current[0].className = current[0]
                        .className.replace(" active", "");
  
                    this.className += " active";
                });
            }
  
            /* Code for changing active 
            link on Scrolling */
            $(window).scroll(function () {
                var distance = $(window).scrollTop();
                $('.page-section').each(function (i) {
  
                    if ($(this).position().top 
                        <= distance + 250) {
                          
                            $('.navbar-nav a.active')
                                .removeClass('active');
  
                            $('.navbar-nav a').eq(i)
                                .addClass('active');
                    }
                });
            }).scroll();
        </script>

【讨论】：