2015-01-02 3 views
0

My Javascript добавляет активный класс ко всем ссылкам с одним сегментом, который соответствует переменной пути, но не с двумя на моем навигаторе.Добавить класс Active для любого URL-адреса для первого сегмента?

Я хочу его независимо от того, чтобы проверить первый сегмент любого URL-адреса, который в настоящее время находится в имени window.location.path, и если первый сегмент соответствует, добавьте активный класс в элемент nav.

Работает на дому, в продуктах и ​​галерее. Но когда я console.log (linkPath), он показывает для url продукты/образцы образец текста, а не продукты. Таким образом, нет математики и она не добавит активный класс к текущему элементу.

Как я могу получить его, чтобы добавить активный класс, независимо от того, что основано на первом сегменте, соответствующем любому URL-адресу с более чем одним сегментом?

HTML

<nav class="navbar" role="navigation"> 
    <h2 class="markup">Main Navigation</h2> 
    <div class="collapse navbar-collapse main-nav-list navbar-link-background"> 
    <ul class="nav navbar-nav"> 
     <li><a href="http://www.example.com/">Home</a> 
     </li> 
     <li><a href="http://www.example.com/products">Products</a> 
     </li> 
     <li><a href="http://www.example.com/gallery">Gallery</a> 
     </li> 
     <li><a href="http://www.example.com/promotions">Promotions</a> 
     </li> 
     <li><a href="http://www.example.com/products/samples">Samples</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

Javascript

var url = window.location.pathname.split('/'), 

path = url[1]; 

/* Get URL For Setting Active Nav List Item */ 
$(".navbar-nav").children("li").each(function() { 
    var link = $(this).children("a").attr("href"), 
     linkPathIndex = link.lastIndexOf("/")+1, 
     linkPath = link.substring(linkPathIndex); 

    if (linkPath == path) { 
     $(this).addClass("active"); 
    } 
}); 

ответ

2

Почему бы вам не проверить на имя пути непосредственно в HREF ссылки? что-то вроде этого:

$(".navbar-nav").children("li").each(function() { 
    var link = $(this).children("a").attr("href"); 
    if(link.indexOf(path) > -1){ 
     $(this).addClass("active"); 
     return; 
    } 
}); 
0

Это то, что я использую:

this.win.on(events.load, function() { 
    var anchors = self.list.prev().find(cache.anchor), 
     url = document.URL; 

    $.each(anchors, function() { 
     var anchor = $(this), 
      href = anchor.prop('href'); 

     if (url.indexOf(href) !== -1) { 
      anchor.addClass(classes.active); 
     } 
    }); 
}); 
Смежные вопросы