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

你错过了隐藏 sibling 的部分并且为你的 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 docs ，其他的 .index() 和 .index('selector') 直到 jQuery 1.4 才添加