根据关联链接更改标题的颜色?每次点击<a>应该使关联的h2变成蓝色

changing the color of a heading depending on the associated link? each click on each <a> should make ony that associated h2 blue

本文关键字：关联 lt gt 蓝色 h2 链接 标题 颜色      更新时间：2023-09-26

问题是，当我点击另一个链接时，上一个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%"});
}
});

我得到了在浏览器中运行的代码。结果应该在页面左侧的side中包含从h2克隆的链接列表。但我无法让它在Jsfile中运行。但这是我所有的代码，也许你可以告诉我为什么它没有在jsfidle中运行，而是在带有html脚本标记的浏览器上运行。Jsfidle

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

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

更好jsFiddle

这样使用类只需要使用.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标记。

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

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>标记，而不仅仅是给标题本身一个targetableID属性。

相关文章：