Question

我正在尝试使用javascript将.active类添加到我的php网站的菜单中，但问题是，当我点击链接时，它会在非常短的时间内添加.active，然后删除它

      $(document).ready(function(){$(document).on('click','ul li a',function(){  $('li a').removeClass("active");
        $(this).addClass("active");
 }); });

和菜单代码是

<ul class="nav ls navbar-nav ">
 <li><a href="<?php echo SITE ?>contact_us.php" class="active">İletişim</a></li>
       <li><a href="<?php echo SITE ?>gallery.php">gallery</a></li>
  </ul>

Answer 1

当您点击链接时，URL会更改（即页面重新加载）和HTML重置 - ＆gt;所以，你失去了.active类。

试试这个：

<script>

    $(document).ready(function(){
        $(document).on('click','ul li a',function(){
            $('li a').removeClass("active");
            $(this).addClass("active");

            // without this below, the click on the link changes
            // the page, so the HTML gets reset
            return false ;
        })
    }) ;

</script>

Answer 2

JavaScript仅影响页面上当前的内容。如果您使用jQuery“addClass”，当您重新加载页面时，整个HTML将重置，并且.active类将丢失。

您必须在后端使用PHP来检测浏览器当前所在的页面，而不是JavaScript。下面的代码保留了你想要的jQuery（尽管没有必要），但也使用PHP函数“create_nav_link”来检测你当前所在的页面，并将“class =”active“'添加到链接中。

整个＆lt; script＆gt;可以删除以下部分，代码仍然有效。

尝试复制＆amp;粘贴以下内容，请随时在评论中向我提问：

<html>
<head>
    <style>
        a {
            color : #000;
        }

        a.active {
            color : #F00;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<ul class="nav ls navbar-nav ">
    <li><?php create_nav_link('/contact_us.php','İletişim') ; ?></li>
    <li><?php create_nav_link('/gallery.php','gallery') ; ?></li>
</ul>
<?php

    function create_nav_link($url,$label) {

        echo '<a href="' . $url . '"' ;
        if ( $_SERVER['REQUEST_URI'] == $url ) echo ' class="active"' ;
        echo '>' . $label . '</a></li>' ;

    }

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

Answer 3

我有类似的问题，并且正在使用此代码（错误的方式行不通）：

<li class="nav-item @if(request()->url() == route('admin.dashboard')){{'active'}} @endif">
  <a class="nav-link " href="{{ url('/admin') }}">
                    <span data-feather="home"></span>
                    Dashboard <span class="sr-only">(current)</span>
  </a>
</li>

然后，我将active类应用于<a>标记，而不是<li>，它对我有用（对我有用的代码）：

<li class="nav-item">
  <a class="nav-link @if(request()->url() == route('admin.dashboard')){{'active'}} @endif" href="{{ url('/admin') }}">
                    <span data-feather="home"></span>
                    Dashboard <span class="sr-only">(current)</span>
  </a>
</li>

我阅读了链接 Problem with the menu and "active" class

那篇文章说我们不应该将active类与<a>一起使用，而应该将<li>与const nodes = document.querySelectorAll('.post-item-info') Array.from(nodes).forEach(node => { // do stuff with node })一起使用，但是在我的情况下，相反的方法起作用了，我仍然不知道为什么。 >

当我添加.active类来菜单时它无法正常工作

3 个答案: