点击时更改H3标签的颜色

Question

我希望通过onclick事件将我的3个h3标签的颜色更改为红色，然后在选择另一个h3标签后将其恢复原来的颜色。

现在选定的h3标签将变为红色。

$(document).ready(function() { 
    $('p.order').on('click', function() { 
        $('h3').css('color', 'red');
    }); 
});
 

<div id="accordion">
    <h3 class="alert"><p class="order">Orders</p></h3>
    <h3 class="cut"><p class="restaurant"> Restaurant</p></h3>
    <h3 class="icon"><p class="Account"> Account</p></h3>
</div>

- jerneva

Answer 1

您可以这样做：

$(document).ready(function() { 
    $('#accordion h3').on('click', function() {
        $('#accordion h3').css('color', 'black');
        $(this).css('color', 'red');
    });
});

DEMO

- lmgonzalves

---

OP不想要那个。当按下另一个h1时，您的h1会恢复默认颜色。 - EugenSunic

我理解了。你理解的是什么？ - lmgonzalves

Answer 2

在 H3 标签内部有一个 P 标签。要更改父级 H3 的 CSS 样式，您需要使用 jQuery parent 函数：

$('p').on('click', function() { 
    $(this).parent('h3').css('color', 'red');
}); 

这样做可以适用于所有段落和标题3。

- GrafiCode