Jquery 从li click事件交换div时出现问题

我是jQuery新手，很难找到简单的工作。我有以下基本html：

首先我有一个按钮列表

<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>

到目前为止，一切顺利。接下来，我尝试在列表上设置单击事件

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

我无法获取单击事件。我还尝试：

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

---

有人知道我哪里出错了吗？

因为这一行，javascript停止运行

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

因此，此行之后的所有js都不会执行。 通过添加一个单引号进行修复

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

如果我是你，我会这样做

<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>

信息1
信息2
信息3
$（“.hide”）.each（函数（）{$（this.hide（）}）；
$（'ul#list li'）。每个（函数（）{
$（此）。单击（函数（）{
$（“.hide”）.each（函数（）{$（this.hide（）}）；
$（'#ref'+$（this.attr（“id”）.substring（4））.show（）；
});
});

首先，您的类属性看起来可疑：

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

应该是：

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

这是我最后的工作解决方案。问题是我在ready（）方法的作用域之外编写了click函数，所以我的默认设置一定覆盖了我为列表编写click函数的尝试

谢谢你的帮助

<script>

信息1
信息2
信息3

该行似乎有效。它工作，我可以把一个工作线后。对不起，我没有看到你的完全扩展的消息…我是新到这个网站。嘿，谢谢！我要试试看。邦道，再次感谢你在这方面的帮助。你的代码帮助我发现了哪里出了问题。您将示例中的所有脚本都放在列表和div之后，这使我意识到我的列表单击事件在某种程度上超出了执行顺序，因为您的单击在哪里工作。回到我的原始代码，我意识到如果我要使用ready（）方法，我必须在它的范围内为此编写所有代码，否则单击方法首先被编写，然后被设置的代码覆盖。

$（'my#menu li a.1）

应该是

$（'my#menu li a.1'）

。如果已经是

$（'#我的菜单LIA.1'）

，那么我将编辑我的答案。

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

<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>