trouble swapping divs from li click event

Question

I'm new to jQuery and am having a hard time trying to get something very simple to work. I have the following basic html:

first I have a list of buttons

<div id="my_menu">
<ul>
<li><a href="" class='1'">Link 1</a></li>
<li><a href="" class='2'">Link 2</a></li>
<li><a href="" class='3'">Link 3</a></li>
</ul>
</div>

Then I have some divs:

<div id="ref_1">Message 1</div>
<div id="ref_2">Message 2</div>
<div id="ref_3">Message 3</div>

Now I simply want to click a link and show the appropriate message while hiding the others.

First, I set the default message and link state:

$(document).ready(function(){
$('#ref_1').show();
$('#ref_1').siblings('div').hide();
$('#my_menu li a.1).parent('li').addClass("active");
});

So far, so good. Next, I try to setup the click events on the list

$("#my_menu li a").click(function(){
alert('you have a click event');
return false;
});

I can't get a click event. I also tried:

$("#my_menu li").each( function(){
alert('you have a click event');
return false;
});              
});

Can anyone see where I'm going wrong?

Answer 1

Because of this line, javascript stop running

$('#my_menu li a.1).parent('li').addClass("active");
});

So all js after this line will not be executed. Fix by add a single quote

$('#my_menu li a.1').parent('li').addClass("active");
});

If i was you, I will do like this

<div id="links">
   <ul id="list">
       <li id="link1"><a href="javascript:void(0)" class="display">text 1</a></li>
       <li id="link2"><a href="javascript:void(0)" class="display">text 1</a></li>
       <li id="link3"><a href="javascript:void(0)" class="display">text 1</a></li>
   </ul>
</li>
<div class="hide" id="ref_1">Message 1</div>
<div class="hide" id="ref_2">Message 2</div>
<div class="hide" id="ref_3">Message 3</div>
<script>
$(".hide").each(function(){$(this).hide()});
$('ul#list li').each(function(){
    $(this).click(function(){
        $(".hide").each(function(){$(this).hide()});
        $('#ref_' + $(this).attr("id").substring(4)).show();
    });
});
</script>

Answer 2

Your class attributes look fishy for a start:

<li><a href="" class='1'">Link 1</a></li>

Should be:

<li><a href="" class="1">Link 1</a></li>

Answer 3

Here's my final working solution. The problem was I was writing the click functions outside of the scope of the ready() method, so my default setup must have been overwriting my attempts to write click functions for the list.

Thanks for the help!

<script>

$(document).ready(function(){
    //default setup
    $('#ref_1').show();
    $('#ref_1').siblings('div').hide();
    $('#my_menu li a.1').parent('li').addClass("active");

    $('#my_menu li a').each(function(){
        $(this).click(function(){
            $(this).parent('li').addClass("active");
            $(this).parent('li').siblings('li').removeClass('active');
            $('#ref_'+$(this).attr("class")).show();
            $('#ref_'+$(this).attr("class")).siblings('div').hide();
            return false;
        });
    });
});

</script>

<div id="my_menu">
<ul>
<li><a href="javascript:void(0)" class='1'>Link 1</a></li>
<li><a href="javascript:void(0)" class='2'>Link 2</a></li>
<li><a href="javascript:void(0)" class='3'>Link 3</a></li>      
</ul>
</div>

<div id="ref_1">message 1</div>
<div id="ref_2">message 2</div>
<div id="ref_3">message 3</div>