Question

当我单击导航链接时，它会重定向到另一个页面，因为我在href标签中有li a，但是活动链接仍然留在家里。例如，如果我单击个人资料上的活动链接，它会显示在Home页上，而不是profile上；或者，如果我单击about页，则活动链接仍会位于home页上。如何根据用户单击的导航栏内容更改active链接？如果用户单击profile，则应从home中删除活动对象，并将其设置为profile。我该如何实现？

到目前为止我一直在尝试：

My code: 


    <html>
    <head>
    
        <link
              rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
            <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        
        
        <body>
            <?php
  
            echo ' <nav class="navbar navbar-expand-md navbar-dark bg-dark p-4 sticky-top">';
            echo '<div class="container-fluid">';
            echo ' <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" >';
            echo ' <span class="navbar-toggler-icon"></span>';
            echo ' </button>';
        
            echo ' <div class="collapse navbar-collapse" id="navbarResponsive">';
            echo ' <ul class="navbar-nav ml-auto">';

            echo ' <li class="nav-item active">';
            echo ' <a href="#" class="nav-link">Home</a>';
            echo ' </li>';
        
         
            
            echo '<li class="nav-item">';
            echo ' <a href="profile.php" class="nav-link">Profile</a>';
            echo '</li>';
        
            echo ' <li class="nav-item">';
            echo ' <a href="about.php" class="nav-link">About</a>';
            echo '</li>';
        
            echo '</div>';
            echo ' </div>';
            echo ' </nav>';

            echo '<script>
        $(document).on("click", "ul li",(function(event) {
            event.preventDefault();
        
           $(this).addClass("active").siblings().removeClass("active)
        });
            </script>';
        
        
        ?>
        
        
        </body>
        
        </html>

Answer 1

仅在单击按钮时设置/删除active类。

您还需要以下JavaScript代码：

在页面加载时运行
检查当前网址
从所有导航链接中删除“活动”类
然后将“ active”类添加到与当前网址匹配的nav链接

类似这样的东西：

$(function() {
  let pageName = location.pathname.split('/').slice(-1)[0];
  let currentLink = $('.navbar-nav .nav-item a[href="' + pageName + '"]');
  if (currentLink) {
  
    $('.navbar-nav .nav-item').removeClass('active');
    currentLink.parent().addClass('active');
  }
});

导航栏链接不会向单击的导航栏添加活动类

1 个答案: