jQuery在4個div之間切換

Question

我有一個jQuery在4個div之間切換的問題。我不知道爲什麼它不起作用。它只是向我展示了第一個div，並沒有做任何事情。當我在另一個網頁上使用它時，它工作。 代碼如下：

HTML：

<table style="width: 75%; border: 0; text-align: center; margin: 0 auto;" align="center" padding="10"><tr> 
<td width="50%" align="center"><a class="ukaz" target="1"></a></td> 
<td width="50%" align="center"><a class="ukaz" target="2"></a></td></tr> 
<tr> 
<td width="50%" align="center"><a class="ukaz" target="3"></a></td> 
<td width="50%" align="center"><a class="ukaz" target="4"></a></td> 
</tr> 
</table> 

<div id="div1" class="cil" style="display:block;"> 
text 
</div> 
<div id="div2" class="cil"> 
text 
</div> 
<div id="div3" class="cil"> 
text 
</div> 
<div id="div4" class="cil"> 
text 
</div> 

CSS：

.cil { 
display: none; 
} 

JS：

jQuery(function() { 
    jQuery('.ukaz').click(function() { 
     var index = $(this).index(), 
      newTarget = jQuery('.cil').eq(index).slideDown(); 
     jQuery('.cil').not(newTarget).slideUp(); 

    }); 
}); 

Answer 1

您當前的表達式查找單擊元素的index但它不」 t知道需要找到的元素的上下文index 至。您需要通過使用所有元素匹配的類.ukaz

找到掣子元件的 index

$('.ukaz').click(function() { 
    var index = $('.ukaz').index($(this)); 
    $('.cil').slideUp(); 
    $('.cil').eq(index).slideDown(); 
}); 

例子：https://jsfiddle.net/DinoMyte/qgo90beb/1/