在 .htaccess 中添加尾随斜杠后，活动菜单不起作用

Question

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

链接已激活

Tech 是选项卡，并且包含已激活但不工作 Active Menu LInk

如果您访问以下网址 菜单活动链接工作正常

 http://example.com/tech

如果您访问以下网址而不是 菜单活动链接将不起作用

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=$1 [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;
}

注意： 网站的内容工作正常......只有活动链接不起作用（主要问题）。

我什至不知道如何实现它我在我身边尝试了数千次但即使我尝试了很多互联网搜索也没有成功，帮助我

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>