0

问题是，当我单击另一个链接时，以前的 h2 仍然是蓝色的，我想要它，以便 h2 恢复其默认颜色黑色，并且与链接关联的新 h2 获得蓝色。我尝试使用我认为可行的 if 语句。

单击链接时，它会检查 h2 元素的颜色以查看它是否为蓝色，如果是，则应将其更改为黑色以模仿默认值。如果 h2 不是蓝色，则转到 else 语句，该语句应将关联的标题 h2 更改为蓝色。变量“id”存储链接的href，其值与h2的id相同。

    $("aside a").click(function(){

    if($("h2").css("color", "rgb(0,0,255)")){
        $("h2").css({"color" : "black"});
    }else{
    id = $(this).attr("href");
    $(id).css({"color" : "blue", "fontSize" : "150%"});
}
});

我得到了在浏览器中运行的代码。结果应该在页面的左侧有一个从 h2s 克隆的链接列表。但我无法让它在 Jsfidle 中运行。但这是我拥有的所有代码，也许你可以告诉我为什么它没有在 jsfiddle 中运行，而是在带有 html 脚本标签等的浏览器上运行。 Jsfiddle

回到主要问题，我想知道为什么我的 if 语句不起作用。如果 h2 为蓝色，则应将颜色设置为黑色，否则应将关联的 h2 更改为蓝色。如果在旁边单击另一个链接，则关联的 h2 将更改为蓝色，并且所有其他 h2 都应该默认为黑色。现在没有颜色变化，为什么？

即使 js fiddle 不起作用，它也有所有的 css 和 javascript 信息。html 部分缺少 html 和 script 标签，因为 jsfiddle 说我不应该把它放进去。

更好的jsFiddle

4

2 回答 2

1

首先，我要添加一些类来定义外观

h2 {
    color: black;
    font-size: 120%;
}
h2.active {
    color: blue;
    font-size: 150%;
}

然后只需通过单击处理程序切换这些类

var headings = $('h2');
$('aside').on('click', 'a', function(e) {
    headings.removeClass('active');
    $(this.hash).addClass('active');
});

更新

你的代码有点乱，所以我借此机会修复了一些 - http://jsfiddle.net/hPvms/5/

您的主要问题是您将<a>标签注入到标题中，而不仅仅是为标题本身提供可定位的 ID 属性。

于 2013-09-03T00:25:46.077 回答
1

以您只需要使用的方式使用一个类.toggleClass，但如果您坚持使用样式......请执行以下操作：

$("aside a").click(function(e){
    e.preventDefault();
    $("h2 a").css('color', 'black');
    var id = $(this).attr('href');
    $(id).css({'color' : 'blue', fontSize: '150%'});
});

h2 a由于您的a标签被分配了ID，而不是标签，因此使用更新h2进行了更新。

于 2013-09-03T00:28:59.607 回答