0

К примеру, у меня есть https://../pc/ и к примеру есть категория в https://../pc/soft и есть новости в данных категориях https://../pc/0_291q_ob_zor или же https://../pc/soft/0-1-test.

Как добавить класс active к ним? Вот что у меня есть

<div id='cssmenu'>
<ul>
   <li><a href='//xxx.xx/'><span>На главную</span></a></li>
   <li class='active has-sub'><a href='//xxx.xx/pc/'><span>PC</span></a>
      <ul>
         <li class='has-sub'><a href='//xxx.xx/pc/soft/'><span>Soft</span></a>
            <ul>
               <li><a href='#'><span>...</span></a></li>
               <li class='last'><a href='#'><span>...</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='//xxx.xx/android/'><span>Android</span></a>
            <ul>
               <li><a href='//xxx.xx/android/soft/'><span>Soft</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

</div>

Есть скрипт, но он не работает когда заходишь к примеру в новости, или не добавляет в под категории И категории.

$(function () { 
$('#cssmenu > ul > li > a').each(function () {
    var location = window.location.href;
    var link = this.href; 
    if(location == link) {
        $(this).closest("li").addClass('active');
    }
 });
});

2 ответа 2

1
$('#cssmenu a').each(function () {
  ...
  $(this).parents("li").addClass('active');
4
  • Работает всё, кроме в новостях.
    – Topper-H
    30 ноя 2018 в 19:29
  • Объясните, пожалуйста, что это значит.
    – user176262
    30 ноя 2018 в 19:32
  • Есть новости, они находятся в данных категориях, и ссылка выглядит вот так: https://../pc/0_291q_ob_zor, хотелось бы добавить в <a href='//xxx.xx/pc/'><span>PC</span></a> класс active.
    – Topper-H
    30 ноя 2018 в 20:48
  • $(function() { $('#cssmenu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); }); нашел, но я не могу понять как его интегрировать, или как его правильно использовать
    – Topper-H
    30 ноя 2018 в 21:03
0

Вот скрипт(jQuery):

(function( $ ) {
$.fn.activeNavigation = function(selector) {
    var pathname = window.location.pathname
    var extension_position;
    var href;
    var hrefs = []
    $(selector).find("a").each(function(){
        // Remove href file extension
        extension_position = $(this).attr("href").lastIndexOf('.');
        href = (extension_position >= 0) ? $(this).attr("href").substr(0, extension_position) : $(this).attr("href");

        if (pathname.indexOf(href) > -1) {
            hrefs.push($(this));
        }
    })
    if (hrefs.length) {
        hrefs.sort(function(a,b){
            return b.attr("href").length - a.attr("href").length
        })
        hrefs[0].closest('li').addClass("active")
    }
};
})(jQuery);

И в самом html надо вставить указание на активный ел.(меню):

<script type="text/javascript">
$(document).ready(function(){
    $(document).activeNavigation("#nav")
}); 
</script>

Решение на GitHub

Взял, настроил и всё получилось,кому-то может пригодиться)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.