Question

我这里有三个菜单项：

<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处于活动状态。

我希望无论何时点击任何链接green或red，它都应该是有效的
标签的颜色应根据所选链接进行更改

我在这方面遇到了麻烦。

Answer 1

这样的东西？

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

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

Answer 2

您可以在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 3

如果没有完全做好所有事情，这应该指引你走上正轨。关于代码的一些注意事项 - 您应该将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");

                    });
                });

Answer 4

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

HTML：将属性data-color="blue"

添加到所有li

添加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'));         
    });
});

点击链接菜单项时，jquery进行操作

4 个答案: