更改 H3 标签的颜色 onclick

Question

我想通过 onclick 事件将我的 h3 标签（总共 3 个）的颜色更改为红色，然后在选择另一个 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>

Answer 1

你可以这样做：

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

DEMO

Answer 2

P 标签位于 H3 标签内。要更改父 H3 的 css，您必须使用 jquery 父函数：

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

这种方式适用于所有 Ps 和 H3s

更改 H3 标签的颜色 onclick

Change colour of H3 tag onclick

html

javascript

jquery

header