jQuery добавить класс к пунктам меню?

Question

У меня есть следующие пункты меню:

<ul>
    <li class="static">
        <a class="static menu-item" href="/mySites/AboutUs">About Us</a>
    </li>
    <li class="static">
        <a class="static-menu-item" href="/mySite/Practices">Practices</a>
    </li>
    <li class="static">
        <a class="static-meunu-item" href="/mySite/Sectors">Sectors</a>
    </li>
</ul>

Я не могу добавить определенные фоновые изображения к пунктам меню, поскольку все они имеют один и тот же класс. Для достижения этого было бы идеально, если бы можно было добавить определенные классы, например:

<ul>
    <li class="static">
        <a class="static menu-item about-us" href="/mySites/AboutUs">About Us</a>
    </li>
    <li class="static">
        <a class="static-menu-item practices" href="/mySite/Practices">Practices</a>
    </li>
    <li class="static">
         <a class="static-meunu-item sectors" href="/mySite/Sectors">Sectors</a>
    </li>
</ul>

В приведенном выше примере красным цветом выделены добавленные классы. Это позволит мне добавить определенные фоновые изображения для каждого пункта меню.

Как мне добиться этого с помощью метода .addClass() в jQuery?

Answer 1

В этом случае добавление определенных классов является излишним. Я бы просто использовал селектор href, так как это похоже на то, на чем вы основываете свои классы:

// *= indicates contains
$('a[href*="AboutUs"]').addClass("about-us");
$('a[href*="Practices"]').addClass("practices");
$('a[href*="Sectors"]').addClass("sectors");

Если на странице есть другие якоря с теми же ссылками, которые вы не хотите включать, просто используйте родительский> дочерний селектор:

// *= indicates contains
$('.static > a[href*="AboutUs"]').addClass("about-us");
$('.static > a[href*="Practices"]').addClass("practices");
$('.static > a[href*="Sectors"]').addClass("sectors");

Вот рабочий jsFiddle для иллюстрации решения.

Answer 2

Вы должны иметь возможность добавить класс, передав функцию обратного вызова в функцию addClass -

$("a").addClass(function() {
  var newclassname = $(this).text().toLowerCase();
  return newclassname.replace(/ /g,'-');
})

Демо - http://jsfiddle.net/aZEZN/

Answer 3

Избыток или нет, иногда мы можем просто захотеть быстро проверить идеи в браузере, или вы можете работать с nodejs.Я отредактировал классы ссылок в static-menu-item.

var links = $("body").find("a.static-menu-item");
$.each(links, function(value) {
    var items = $(this).attr('href').split("/");
    $(this).addClass(items[items.length-1].toLowerCase() );
});

Рабочий пример

Answer 4

Лично я считаю излишним делать такие вещи с Javascript.Имеет больше смысла делать это на стороне сервера, как это было упомянуто выше.Или ... CSS!Вы можете использовать псевдо-классы CSS3, чтобы сделать это.Я создал пример здесь

Чтобы это работало в старых браузерах, таких как IE7, обязательно добавьте Selectivizr в head раздел

Answer 5

Не обязательно излишне указывать отдельные классы для каждого элемента списка. Класс должен использоваться (в отличие от идентификатора), когда есть даже возможность сгруппировать несколько элементов вместе (для сценариев, стилей). В вашем случае, поскольку это навигационное меню, у вас может быть несколько меню (например, боковая панель на левой панели, а также меню нижнего колонтитула). Исходя из моего опыта, я бы определил каждую кнопку меню в качестве своего собственного класса, чтобы обрабатывать группу ссылок вместе (т.е. все ссылки, которые направляют пользователя на страницу О нас).

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

Чтобы добавить к этому, у erimerturk была хорошая идея указать основные моменты или «темы» в ваших стилях. Это хорошая практика (хотя и не для вашего случая), когда вы хотите указать определенную цветовую схему для своего сайта. Укажите свой цвет, цвет фона и блики как классы и пометьте эти классы необходимыми элементами в вашем html напрямую. Это огромный стимул для удобства обслуживания и масштабируемости, поэтому, хотя я бы не сказал, что это хорошая практика, для меня это, безусловно, неплохая практика.

Answer 6

определите свой класс следующим образом;

.highlight { background:yellow; }
.highlight2 { background:yellow; }
.highlight3 { background:yellow; }

затем добавьте свой класс следующим образом;

$(".about-us").addClass("highlight");
$(".practices").addClass("highlight2");
$(".sector").addClass("highlight3");