单击链接菜单项时 jQuery 执行操作

Question

我这里有三个菜单项：

JSFIDDLE：小提琴链接

<div class="home-content">
                <div class="menu-bar">
                        <ul class="nav nav-tabs">
                          <li class="active"><a href="#">Blue<sup>beta</sup></a></li>
                          <li><a href="#">Green<sup>beta</sup></a></li>
                          <li><a href="#">Red</a></li>
                        </ul>                        
                </div>

默认情况下，链接blue处于活动状态。

1. 我希望每当单击任何链接green或red时，它都应该处于活动状态
2. 标签的颜色应根据所选链接进行更改

我在这一点上遇到了麻烦。

Answer 1

您可以在

li上添加DATA颜色，如下所示：

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

然后使用此代码：

$(function () {
    $(".menu-bar li a").click(function () {
        $('.active').removeClass('active'); //Remove the current active item
        var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
        $("#l1").css("color", color); //Change color
    });
});

小提琴 ： http://jsfiddle.net/ZjgV4/6/

Answer 2

像这样的东西？

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

http://jsfiddle.net/3mhCW/1/

Answer 3

在没有完全做所有事情的情况下，这应该为你指明正确的轨道。关于代码需要注意的几件事 - 你应该将 e 事件传递给点击处理程序，并使用 jQuery 的e.preventDefault();来停止链接。此外，您需要在 css 函数中引用该值。 .css("color", "red")否则，您将收到未定义红色的未定义错误。与其操作元素的 css，我会分别使用 add/removeClass 并使用 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");
                    });
                });

Answer 4

我在这里包含了代码。基本上，我将颜色名称插入到一个类中，每种颜色都有自己的类，每个 LI 都有一个全局属性 data-*，其中包含颜色的值（类的名称）

.HTML： 将属性添加到所有 li data-color="blue"

添加 CSS：

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

j查询：

$(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'));         
    });
});