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>

上面以红色突出显示的示例是已添加的类。然后，这将允许我将特定背景图像添加到每个菜单项。

如何使用jQuery中的.addClass()方法实现此目的？

Answer 1

在这种情况下，添加特定类是过度的。我只想使用href选择器，因为这似乎就是你的课程基础：

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

如果页面上有其他锚点具有您不想包含的相同href，则只需使用父＆gt;子选择器：

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

以下是a working jsFiddle来说明解决方案。

Answer 2

您应该可以通过将回调函数传递给addClass函数来添加类 -

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

演示 - http://jsfiddle.net/aZEZN/

Answer 3

像这样定义你的类;

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

然后像这样添加你的课程;

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

Answer 4

为每个列表项指定单独的类不一定是过度杀伤。当甚至有可能将多个元素组合在一起时（对于脚本，样式），应该使用类（而不是ID）。在您的情况下，由于这是一个导航菜单，您可能有多个菜单（例如左侧窗格侧栏，页脚菜单等）。根据我的经验，我会将每个菜单按钮指定为自己的类，以便一起处理一组链接（即将用户引导至“关于我们”页面的所有链接）。

最明显的好处是，您可以将组中的活动链接单独处理;就像在这些链接上有悬停颜色一样，当用户在该特定页面上时，您可能希望链接变为粗体。将链接组合在一起并将其作为一个类处理将允许您在有多个菜单时加粗所有链接。

除此之外，erimerturk还很清楚在你的风格中指定亮点或'主题'。当您想为站点指定某种颜色方案时，这是一种很好的做法（尽管不适用于您的情况）。将颜色，背景颜色和高亮显示指定为类，并将这些类直接标记为html中的必需元素。这对可维护性和可扩展性来说是一个巨大的推动，所以虽然我不会说它是好的做法，但就我而言，这当然不是坏事。

Answer 5

我个人觉得用Javascript做这些事情太过分了。如上所述，做服务器端更有意义。要么... CSS！您可以使用CSS3伪类来执行此操作。我创建了一个example here

要在IE7等旧版浏览器中使用，请确保将Selectivizr添加到head部分

Answer 6

是否过度杀戮，有时我们可能只想在浏览器上快速测试想法，或者您可能正在使用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() );
});

Working example

jQuery为菜单项添加一个类？

6 个答案: