创建“选定项”导航菜单的Javascript代码

Creating a "selected item" javascript code for navigation menu?

本文关键字：菜单 导航 Javascript 代码 选定项 创建      更新时间：2023-09-26

我有一个大约有10个项目的导航菜单，我把这段代码放在一起来更新被选中和未选中的链接。它手动更新类。问题是，正如你可能知道的那样，它效率低下，而且更新起来很痛苦。有更好的方法吗?

$('#Button1').click(function(){
        $('#Button1').addClass("selectedItem");
        $('#Button2').removeClass("selectedItem");
        $('#Button3').removeClass("selectedItem");
        $('#Button4').removeClass("selectedItem");
        $('#Button5').removeClass("selectedItem");
        $('#Button6').removeClass("selectedItem");
        $('#Button7').removeClass("selectedItem");
        $('#Button8').removeClass("selectedItem");
        $('#Button9').removeClass("selectedItem");
        $('#Button10').removeClass("selectedItem");
    });

你可以尝试这样做- 

$("[id^='Button']").removeClass("selectedItem");
$('#Button1').addClass("selectedItem");

这将首先从任何具有以"button"开头的id属性的元素中删除所有selectedItem类。然后第二个命令将类添加到Button1

您也可以简单地用相同的处理程序绑定所有元素，像这样- 

var $buttons = $("[id^='Button']");
$buttons.on('click', function ()
{
  $buttons.removeClass("selectedItem");
  $(this).addClass("selectedItem");
});

对于每个元素，当被单击时，类将被删除-被单击的元素将被添加类。

检查Attribute Starts With Selector [name^="value"]选择器

我建议使用类，因为这正是它们的用途——表示元素组。虽然可以使用Lix提出的方法轻松地选择按钮(如果不能修改HTML，应该使用该方法)，但使用class更不引人注目:

var $buttons = $('.button').on('click', function() {
    $buttons.removeClass('selectedItem');
    $(this).addClass('selectedItem');
});

Meta示例:http://jsfiddle.net/88JR2/

你可以创建一个。button类然后把它应用到你所有的按钮上，然后

$('#Button1').click(function(){
    $('.button').removeClass("selectedItem");
    $('#Button1').addClass("selectedItem");
});
相关文章：