javascript - jQuery 在 4 个 div 之间切换

Question

我在 4 个 div 之间切换 jQuery 时遇到问题。我不知道为什么它不起作用。它只是向我展示了第一个 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，但它不知道需要查找 index 到哪个元素的上下文。您需要通过使用与类 .ukaz

匹配的所有元素来查找点击元素的 index

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

示例:https://jsfiddle.net/DinoMyte/qgo90beb/1/