2012-03-14 2 views
0

Хорошо,Авто-Выбор текущего класса - Меню навигации

Так что я пытаюсь сделать это имея навигации обновленных с «выбранным» классом, обозначающей странице на текущий конечный пользователь.

Я пробовал множество вещей. Но ничего не работает. Вот мой код:

JQuery:

jQuery(function() { 
    var path = location.pathname.substring(1); 
    if (path) 
     jQuery('.navigation ul li a[href$="' + path + '"]').attr('class', 'selected'); 
}); 

HTML-:

<div class="navigation"> 
    <ul> 
     <li><a href="index.html">HOME</a></li> 
     <li><a href="team.html">TEAM</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="services.html">SERVICES</a></li> 
     <li><a href="portfolio.html">PORTFOLIO</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 

CSS-:

.navigation li a.selected { 
    background: url(../images/navigation-background-active.png) repeat-x; 
    text-decoration: none; 
} 

I f Вы смущены тем, что я прошу ... Вы можете просмотреть эту ссылку: http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation

Большое вам спасибо!

ответ

1

Edit: Я смотрел на свой веб-сайт и значение пути является portfolio/newish/index.html

Вероятно, вы должны substring на основе lastIndexOf/. Попробуйте ниже,

jQuery(function() { 
    var path = location.pathname; //return /portfolio/newish/index.html 
    path = path.substring(path.lastIndexOf('/') + 1); //will return index.html 

    if (path) 
     jQuery('.navigation ul li a[href$="' + path + '"]').addClass('selected'); 
}); 

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

jQuery('.navigation ul li a[href$="' + path + '"]').addClass('selected'); 
+1

Не уверен, что это решает вашу проблему или нет, но вы, вероятно, также можете сократить ваш селектор до '.navigation a [href $ =" '+ path +' "] '' –

+0

@MikeTangolics: Welp, ни один из этих исправили мою проблему, но они наверняка сократили мой код. Спасибо! –

+0

@SKS: Спасибо, но это не исправить. –

1

Вы подтвердили, что location.pathname.substring(1) выводит то, что вы ожидаете? То есть index.html и т. Д.?

path function works (JS добавляет show из-за фрейма), и ваш селектор выглядит правильно, поэтому единственное, что я могу думать о том, что путь, который вы ожидаете его выхода не то, что выводится на вашем сайте.

Смежные вопросы