Question

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

然后我有一些div：

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

现在我只想点击链接并显示相应的消息，同时隐藏其他消息。

首先，我设置了默认消息和链接状态：

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

到目前为止，这么好。接下来，我尝试在列表中设置点击事件

$("#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;
});              
});

谁能看到我出错的地方？

Answer 1

由于这一行，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>

Answer 2

你的班级属性看起来很可疑：

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

应该是：

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

Answer 3

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

感谢您的帮助！

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

从li click事件中交换div的麻烦

3 个答案: