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 docsによると.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/