使用jquery html css滑动Div内容

Question

我制作了Tabs。 每个标签包含一个div。 我想使用if else条件从左到右滑动div内容。 但我检查了警报框。 但它没有用。 这是我的代码。

$('.tabs').click(function() {
if ('.tabs :nth-child(even)')
    {
  alert("11111");
  $('.tab-content').hide("slide", {
    direction: "left"
  }, 1000);
  alert("222222");
  $('.tab-content').show("slide", {
    direction: "left"
  }, 1000);
  alert("3333333");} 
    else 
   {
     $('.tab-content').hide("slide", {
    direction: "right"
  }, 1000);
  alert("777777");
  $('.tab-content').show("slide", {
    direction: "right"
  }, 1000);
  alert("6666666");
  }
});

Answer 1

问题出在您的click事件中，您缺少$并且您的if条件错误。

的jsfiddle

这是一个检查偶数或奇数索引的演示代码：

 $('div').click(function() { //do something different based on whether even or odd div if ($(this).is(':even')) { $(this).html('even'); } else { $(this).html('odd'); } }); 

 <div>one</div> <div>two</div> <div>three</div> <div>four</div> 

编辑：如果您不想使用奇数偶数概念，您可以toggle 。最简单的无错误方式之一是按照我在小提琴中所做的方式。

您的FIDDLE更新

编辑2： 检查这个只显示目标内容