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

Question

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

链接已激活

技术是选项卡并且包含已激活但不工作活动菜单链接

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

 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;
}

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

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

标签： phpjquerywebcontent-management-systemweb-site-project

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>