Активное меню не работает после добавления косой черты в .htaccss

Я создаю динамический сайт блога PHP, где у меня есть активное текущее меню с помощью jQuery, все работало нормально до модификации .htacess для завершающей косой черты…

ссылка активирована

введите здесь описание изображения

Вкладка «Технология» активирована, но не работает Ссылка на активное меню

введите здесь описание изображения

Если вы перейдете по ссылке ниже, Меню Active Link работает нормально

 http://example.com/tech

Если вы перейдете по ссылке ниже, активная ссылка меню не будет работать

http://example.com/tech/

Для Trailing Slash я использую код ниже

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

Н.Б. : Контент веб-сайта работает нормально.... не работает только АКТИВНАЯ ссылка (основная проблема).

Я даже не знаю, как это сделать. Я пытался это сделать на своей стороне тысячу раз, но безуспешно, даже я пытался много искать в Интернете, помогите мне


web php jquery content-management-system web-site-project
person Er Mantu Suna    schedule 02.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте добавить это в свой 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>

person The_Death_Raw    schedule 02.02.2021
comment
@The_Death_Raw bhai, ты молодец.... спасибо за помощь.... Люблю тебя, братан... Люблю твой код... большое спасибо.... - person Er Mantu Suna; 02.02.2021