2013-05-24 3 views
0

У меня есть это регулярное выражение jQuery, которое я получил из другого потока здесь, в stackoverflow. Он добавляет класс css в текущий пункт меню на основе URL-адреса. Это выглядит следующим образом:Измените регулярное выражение, чтобы выделить текущий пункт меню

<script> 
      $(function() { 
       // show current menu object highlighted 
       var url = window.location.pathname, 
       urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/, '')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there 

       // now grab every link from the navigation 
       $('nav a').each(function() { 
        // and test its href against the url pathname regexp 
        if (urlRegExp.test(this.href)) { 
         $(this).addClass('current'); 
        } 

        console.log(url); 
        console.log($(this).attr('href')); 
       }); 

      }); 
     </script> 

Это прекрасно работает, если путь именно так в HREF ссылки, но я хочу, чтобы это применять также для подстраниц текущего объекта меню. Это моя навигация:

<nav> 
<ul> 
       <li> 
        <a href="/Admin/Blogs" title="Blog" style="border-left: 1px solid rgba(0,0,0,.15);">Blog</a> 
       </li><li> 
        <a href="/Admin/Shows" title="Shows">Shows</a> 
       </li><li> 
        <a href="/Admin/StoreItems" title="Store">Store</a> 
       </li><li> 
        <a href="/Admin/Pages" title="Pages">Pages</a> 
       </li><li> 
        <a href="/Admin/Menu" title="Menu">Menu</a> 
       </li><li> 
        <a href="/Admin/SocialMedia" title="Social media">Social media</a> 
       </li><li> 
        <a href="/Admin/ImageGallery" title="Image gallery">Image gallery</a> 
       </li><li> 
        <a href="/Admin/MailSettings" title="Mail settings">Mail settings</a> 
       </li><li> 
        <a href="/Admin/PageSettings" title="Site configuration">Site configuration</a> 
       </li> 
      </ul> 

     </nav> 

Допустим, что путь/Admin/Блоги/Создать, я хочу, чтобы пункт меню Блог будет подсвечен. На данный момент это не так. Также, если я перехожу к/Admin (то есть к домашней странице), на данный момент выбираются все пункты меню, что нежелательно.

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

+0

школьный проект? Для этого случая вы можете использовать подстроку или строковое соответствие вместо регулярного выражения. или их комбинацию для упрощения регрессии exp. Символ Start^будет полезен в вашем случае. – Winfred

+0

Спасибо за подсказку! Я постараюсь это сделать. –

ответ

0

Я получил его на работу с этим кодом:

<script> 
      $(function() { 
       // show current menu object highlighted 
       var url = window.location.pathname; 
       var checkString; 

       // now grab every link from the navigation 
       $('nav a').each(function() { 
        // and test its href against the url pathname 
        checkString = url.match($(this).attr('href')); 
        if ((checkString != null && $(this).attr('href') != '/') || (url == $(this).attr('href'))) { 
         $(this).addClass('current'); 
        } 
       }); 

      }); 
     </script> 
0

Я был в состоянии заставить его работать с кодом Микаэла, но он не будет держать связь в активном состоянии на подстраницах. Я получил его для работы с приведенным ниже кодом. Слово в URL-адресе href & должно быть закодировано, но оно работает для меня, потому что «потребитель» - это имя папки, и все вспомогательные страницы будут /consumer/page.html

$(function() { 
     // show current menu object highlighted 
     var url = window.location.pathname; 
     var checkString; 

     // keeps the link active on sub pages, 'consumer' is the folder in this instance and all sub pages with be /consumer/page.html 
     if (url.indexOf("consumer") != -1){ 
      $('#quick-links a').each(function(){ 
       if($(this).attr('href').indexOf("consumer") != -1){ 
        $(this).parent('li').addClass('active'); 
       } 
      });  
     } 

     // now grab every link from the navigation 
     $('#quick-links a').each(function() { 
      // and test its href against the url pathname 
      checkString = url.match($(this).attr('href')); 
      if ((checkString != null && $(this).attr('href') != '/') || (url == $(this).attr('href'))) { 
       $(this).parent().addClass('active'); 
      } 
     }); 

    }); 
Смежные вопросы