Show DIV X, if Div Y contains Z. Then, show Div A, if Div Y contains B

I've got some code I've been working on, effectively to hash together a progress step bar.

The HTML:

<div id="stage1"><img src="/img/progress-bar/1.png"></div>
<div id="stage2"><img src="/img/progress-bar/2.png"></div>
<div class="deal-stage">2</div>

Now I want to display the DIV #stage1 if the div .deal-stage contains the number 1. I then want to display the DIV #stage2 if the div .deal-stage contains the number 2.

All HTML looks ok, it's the JQuery that's troubling me:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
if($('.deal-stage').html() == 1){
$("#stage1").show();
if($('.deal-stage').html() == 2){
$("#stage2").show();
}
});//]]> 
</script>

At the moment both DIVs are showing. I want to add 4 more steps but I'm not sure how to only display one of the DIVS at a time by looking up the number in the .deal-stage DIV.

Any ideas would be very much appreciated.

Thank you!

S