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>

在上面的例子中，突出显示的是已添加的类。这将使我能够为每个菜单项添加特定的背景图像。

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

- Dev P

---

你真的需要在运行时添加类吗？我想最好是通过服务器代码或HTML模板文件来添加它们。 - ikromm

它们并不都属于同一类，其中一个是“静态菜单项”，另一个是“静态-菜单项”，还有一个是“静态-菜单-项”…… - Nick Veys

抱歉，那是一个打字错误，它们都有相同的类“static menu-item”。我想避免重新构建SharePoint2010菜单，所以我认为这将是一种更好的方法，可以为特定的菜单项添加特定的背景图像。 - Dev P

请将您的HTML标签转换为小写。大写的HTML标签会让人感到不适，我们已经在90年代抛弃了它们。 - user229044

Answer 1

在这种情况下，添加特定的类是过度的。我建议只使用 href 选择器，因为这似乎是你所依据的类：

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

如果页面上有其他具有相同href的锚点，而您不想包括它们，只需使用父级 > 子级选择器即可：

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

这里有一个可行的jsFiddle展示解决方案（点击此处）。

- James Hill

---

更正：*=并不意味着“以...开头”，^=表示“以...开头”，$=表示“以...结尾”，而*=表示“包含”。 - Sander

@Sander，你是对的！我知道那个（这就是为什么我用了那个），但是我打starts with只是想看看自己是否能让自己看起来傻。我想它起作用了 :) - James Hill

非常感谢您的帮助，非常感激。我会尝试一下这个方法。 - Dev P

快速问题！使用您建议的方法，"static menu-item"类仍然会被使用吗？正确吗？ - Dev P

@DanielPerez，不需要static-menu-item（但也不会有任何影响）。在我的第一个选项中，它将为页面上包含“insert search term here”的任何锚点添加一个类。第二个选项仅将类添加到包含“static”类的元素的子元素中。明白了吗？ - James Hill

是的，谢谢。我只是不想删除它，因为它被SharePoint2010使用。无论如何感谢您。 - Dev P

Answer 2

您应该能够通过将回调函数传递给addClass函数来添加一个类 -

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

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

- ipr101

Answer 3

并不一定需要为每个列表项指定单独的类，这样做有些过度设计。当有可能将多个元素分组在一起（用于编写脚本、样式时），应该使用类（而不是ID）。在您的情况下，由于这是一个导航菜单，您可能会有多个菜单（例如左侧面板边栏、页脚菜单等）。根据我的经验，我会将每个菜单按钮指定为自己的类，以便将链接组合在一起处理（即所有链接都将用户引导到“关于我们”页面）。

最明显的好处是，您将能够将活动链接作为一组进行处理，而不是单独处理；就像这些链接上有悬停颜色一样，当用户在特定页面时，您可能也希望链接变粗。将链接分组并将其作为类处理，可以让您在有多个菜单时加粗所有链接。

除此之外，erimerturk提出了一个很好的想法，即在您的样式中指定亮点或“主题”。当您想为您的网站指定某种颜色方案时，这是一个很好的做法（尽管不适用于您的情况）。将您的颜色、背景颜色和亮点指定为类，并直接将这些类标记到html中所需的元素上。这对于可维护性和可扩展性是一个巨大的提升，因此虽然我不会说它是一个好的做法，但就我而言，它肯定不是一个坏的做法。

- Prusprus

Answer 4

我个人认为使用JavaScript 做这样的事情有点过度。 像之前提到的那样，在服务器端处理更有意义。 或者…… CSS！你可以使用CSS3 伪类来做到这一点。 我已经在这里创建了一个 示例。

要使其在旧版本浏览器（如IE7）中工作，请确保将Selectivizr 添加到您的 head 部分中。

- peduarte

---

我已经尝试过这个，但由于某些原因，相同的背景图像被应用到所有项目上，换句话说，它没有正确区分它们。 - Dev P

很奇怪，我的示例运行得非常好。你用的是什么浏览器？看到一个现场的例子会有帮助 :) 顺便说一下，为什么是-1？ - peduarte

Answer 5

有时候，无论是否过度设计，我们可能只是想在浏览器上快速测试一些想法，或者你可能正在使用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() );
});

工作示例

- quik_silv

Answer 6

请按照以下方式定义您的类：

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

然后像这样添加你的类：

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

- erimerturk