javascript - Change DOM element CSS with jquery Not -

i have 2 clickable headings. when click one, changes blue. if click other one, changes blue, should "unclick" other heading , change black.

i'm trying using jquery not...

$("#pal1, #pal2").click(function(event) {     $(this).css({"color" : "blue"});     var pal1 = $(this).attr('id');     var pal2 = $(this).next().attr('id');        $(this).not(pal2).css({"color" : "black"}); //if selected heading not pal1, or not pal2, changed 1 not == $(this) black. }); 

or that.

---

edit: know can way... wanted use jquery functions reduce code size. plus isn't efficient.

$("#pal1, #pal2").click(function(event) {     $(this).css({"color" : "blue"});             if ($(this).attr('id') !== $("#pal1").attr('id')) {         $("#pal1").css({"color" : "black"});     }     else {         $("#pal2").css({"color" : "black"});     } }); 

set both black, set clicked 1 blue.

$("#pal1, #pal2").click(function(event) {   $("#pal1, #pal2").css({"color" : "black"});   $(this).css({"color" : "blue"}); });