2016-02-12 108 views
0

我有一个jQuery在4个div之间切换的问题。我不知道为什么它不起作用。它只是向我展示了第一个div,并没有做任何事情。当我在另一个网页上使用它时,它工作。 代码如下:jQuery在4个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(); 

    }); 
}); 

回答

2

您当前的表达式查找单击元素的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/

+0

真棒,谢谢! –

+0

很高兴为您提供帮助。星期五快乐 :) – DinoMyte