Javascript jquery在单击链接菜单项时执行操作

我这里有三个菜单项：

JSFIDDLE：

默认情况下，蓝色链接

处于活动状态

我希望无论何时单击任何链接
绿色
或
红色
，它都应该处于活动状态
标签的颜色应根据所选链接进行更改
在这一点上，我面临着麻烦
 像这样的

  $(function () {
      $(".menu-bar li a").click(function () {
             $(".menu-bar li").removeClass("active");
             $(this).parent().addClass("active");
      });
  });

您可以在
li
上添加数据颜色，如下所示：

<li data-color="#0f0"><a href="#">Green<sup>beta</sup></a></li>

小提琴：
如果不完全做每件事，这应该会让你走上正确的轨道。关于代码，需要注意的几点是：您应该将e事件传递给click处理程序，并使用jQuery的
e.preventDefault（）
停止链接。此外，还需要在css函数中引用该值
.css（“color”、“red”）
否则您将得到一个未定义的错误，即未定义红色。我将分别使用add/removeClass并使用css设置元素的样式，而不是操纵元素的css

$(function () {

                    $(".menu-bar li a").click(function (e) {
                        e.preventDefault(); // stop the link from following the href


                        // remove the active class from everything
                        $(".active").removeClass("active");

                        // $(this).css("color", "red"); 
                        $(this).addClass("active");

                    });
                });

我在这里包括了代码。
基本上，我将颜色名称插入到一个类中，每个颜色都有自己的类，每个LI都有一个颜色值（类的名称）

HTML:
将属性
data color=“blue”

添加CSS:

.blue{
    background-color:blue;
}
.green{
    background-color:green;
}
.red{
    background-color:red;
}

jQuery：

$(function () {
    $(".menu-bar li a").click(function () {
        $('.menu-bar li.active').removeClass('active');
        $(this).parent().addClass('active');
        $("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));         
    });
});

谢谢，零钱。我在这里编辑的代码，我想得到的链接时，点击id，你可以请帮助-2种方式。如果您包装
a
：
var id=this.parentNode.id，速度会更快，但不会起作用。通常都会工作：
varid=$（this）.closest（'li'）[0].id。哪一个更好？你还是我的建议？我不确定我不明白你是怎么工作的，因为
这个
是
a
，id在
li
上，但是我很确定香草js更快。而且，
.prop
优于
.attr（）我会运行一些texts@Programming_crazy检查这里什么更快
.blue{
    background-color:blue;
}
.green{
    background-color:green;
}
.red{
    background-color:red;
}

$(function () {
    $(".menu-bar li a").click(function () {
        $('.menu-bar li.active').removeClass('active');
        $(this).parent().addClass('active');
        $("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));         
    });
});