Добавить класс с Jquery или Javascript для <a> тега

У меня есть следующий код:Добавить класс с Jquery или Javascript для <a> тега

<ul class="menubar"> 
    <li><a href="home.php" title="Home">Home</a></li> 
    <li><a href="services.php" title="Services">Services</a></li> 
    <li><a href="aboutus.php" title="About Us">About Us</a></li> 
    <li><a href="contact.php" title="Contact Us">Contact Us</a></li> 
</ul>

Мне нужно помочь выяснить, как добавить класс с помощью Jquery или Javascript (предпочтительно Jquery) в соответствии с текущей страницы. Например, когда на странице «Home.php» я хотел бы добавить класс «.selected» к активному тегу <a> и в то же время добавить класс «.none» ко всем другим ссылкам.

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

<ul class="menubar"> 
    <li><a href="home.php" class="selected" title="Home">Home</a></li> 
    <li><a href="services.php" class="none" title="Services">Services</a></li> 
    <li><a href="aboutus.php" class="none" title="About Us">About Us</a></li> 
    <li><a href="contact.php" class="none" title="Contact Us">Contact Us</a></li> 
</ul>

Согласно тому, как остальная часть кода работает, мне нужен класс для назначения на <a> тег, а не все <li> позиция. Любые идеи приветствуются.

источник

2012-04-27 antigaprime

Очень простой метод, никаких гарантий эффективности. HTML:

<ul class="menubar"> 
    <li><a href="home.php" class="selected" id="Home">Home</a></li> 
    <li><a href="services.php" class="none" id="Services">Services</a></li> 
    <li><a href="aboutus.php" class="none" id="About Us">About Us</a></li> 
    <li><a href="contact.php" class="none" id="Contact Us">Contact Us</a></li> 
</ul>

Javascript:

$(document).ready(function() { 
$("#"+ $.trim($("title").html())).addClass("selected"); 
});

Edit: добавлено $ .trim(), только дополнительный шаг.

источник

2012-04-27 18:06:19 KBN

вы, вероятно, хотите .text() не .html() Methinks –

Hi Mark, как текст() и HTML() будет работать нормально. – KBN

Вы также можете сделать 'document.title', не уверен, что он быстрее, чем: -P –

попробовать что-то вроде этого (возможно, придется использовать различные свойства от location, как href или pathname, но вы получите идею):

$('ul.menubar a').each(function(){ 
    if(location.href === this.href){ 
     $(this).addClass('selected'); 
     $('ul.menubar a').not(this).addClass('none'); 
     return false; 
    } 
});

Или еще лучше:

$('ul.menubar a').addClass('none').filter('a[href="'+location.pathname+'"]') 
    .removeClass('none').addClass('selected');

Вот Дополнительная информация о объекте location: https://developer.mozilla.org/en/DOM/window.location

источник

2012-04-27 18:06:36

Первый работал как шарм. 2-й, присваивается класс «none», а не «выбранный», даже при использовании «location.href», но спасибо много! – antigaprime

@antigaprime: Добро пожаловать. Я был не слишком уверен в том, что я второй, я просто бросил его туда, черт возьми. :-П –

Просто добавьте атрибут идентификатора в Твоя "метка" и с помощью JQuery сделать:

$("#home").addClass('selected');

источник

2012-04-27 18:06:50

Добавить класс с Jquery или Javascript для <a> тега

ответ

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