在 .htaccess 中添加尾部斜杠后，活动菜单无法正常工作

Question

我正在创建一个动态 PHP 博客站点，其中我使用 jQuery 激活当前菜单，在 .htacess 修改尾部斜杠之前一切正常…

link activated

Tech is tab and contain is activated but not working Active Menu LInk

If you visit below url Menu Active Link works fine

 http://example.com/tech

If you visit below url than Menu Active Link will not work

http://example.com/tech/

对于尾部斜杠我使用下面的代码

.htacess

#force trainling slash
RewriteCond %{REQUEST_URI} /+[^\.]+$
RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]
#end of force trailing slash

RewriteRule ^([0-9a-zA-Z]+)/?$ archive.php?category= [QSA,L]

菜单

<ul id="nav-main">
  <li><a href="http://example.com/"> Home</a></li>
  <li><a href="/tech">  Technology</a></li> 
  <li><a href="/business">Business</a></li>
  <li><a href="/sports"> Sports</a></li> 
  <li><a href="/science">Science</a></li>
</ul>

jQuery

jQuery(document).ready(function($){
        var path = window.location.href;
        $('#nav-main li a').each(function() {
            if (this.href === path) {
                $(this).addClass('active'); 
            }
        });
    });

Css

ul#nav-main li a:hover {
  border-bottom: 4px solid #4db2ec;
  color: black;
  font-weight: bold;
}
ul#nav-main li a.active {
  border-bottom: 4px solid #4db2ec;
  color: black;
  font-weight: bold;
}

N.B。 : 网站的内容工作正常....只有 ACTIVE Link 不工作（主要问题）。

我什至不知道如何做到这一点我已经在我这边尝试了数千次但即使我尝试了很多互联网搜索也没有成功，帮助我

Answer 1

尝试将此添加到您的 if 中：|| this.href === 路径 + '/'

jQuery(document).ready(function($){
    var path = window.location.href;
    
    console.log(path);
    $('#nav-main li a').each(function() {
        if (this.href === path || this.href === path + '/') {
            $(this).addClass('active'); 
        }
    });
});

ul#nav-main li a:hover {
  border-bottom: 4px solid #4db2ec;
  color: black;
  font-weight: bold;
}
ul#nav-main li a.active {
  border-bottom: 4px solid #4db2ec;
  color: black;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav-main">
  <li><a href="http://example.com/"> Home</a></li>
  <li><a href="/tech">  Technology</a></li> 
  <li><a href="/business">Business</a></li>
  <li><a href="/sports"> Sports</a></li> 
  <li><a href="/science">Science</a></li>
  <li><a href="/js/">Test</a></li>
</ul>

在 .htaccess 中添加尾部斜杠后，活动菜单无法正常工作

Active Menu not working after trailing Slash added in .htaccss

php

jquery

web

content-management-system

web-site-project