javascript - 单击每个项目时显示内容

Question

我有一个列表，我想在单击每个项目并隐藏前一个项目时显示内容。唯一的限制是我必须使用 jquery 1.4.2

<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<div>
<div class="content">1.1</div>
<div class="content">1.2</div>
<div class="content">1.3</div>
</div>

--script--
$('.content').hide();
$('#list li').live('click', function(){
    $('.content').eq($(this).index()).show();
});

Answer 1

您缺少隐藏的兄弟姐妹部分并为您的 ul 使用了错误的选择器类型

$('.content').hide();
$('.list li').live('click', function(){
    $('.content').eq($(this).index()).show().siblings().hide(); // <-- here
});

http://jsfiddle.net/zcgYw

对于 jQuery 1.3.2，你必须改变你使用索引的方式

$('.content').hide();
$('.list li').live('click', function(){
    var ind = $('li').index(this); // <-- this is how you have to use it
    $('.content').eq(ind).show().siblings().hide(); // <-- here
});​

http://jsfiddle.net/vvrqK/

根据jQuery 文档.index()，另一个.index('selector')直到 jQuery 1.4 才添加

Answer 2

可能是你的错字

$('#list li')应该$('.list li')

$('.list li').live('click', function(){
    $('.content').hide().eq($(this).index()).show();
});​

http://jsfiddle.net/vjAmQ/2/