Question

我想知道你是否可以帮我解决这个问题，我有一个带有三个表的html页面，我期待按顺序每隔60秒显示三个表中的一个，如下所示：伪代码=开始页面只显示表号1，60秒后只显示表号2，60秒后只显示表3,60秒后再次显示只有表1依旧（依次），我的意思是永远不要停止这样做。我有这个例子：

<body>
<h1>My testing</h1>
<table id="t1">
  <tr>
    <td> Table 1</td>
  </tr>
</table>
<table id="t2">
  <tr>
    <td> Table 2</td>
  </tr>
</table>
<table id="t3">
  <tr>
    <td> Table 3</td>
  </tr>
</table>
</body>
<script>
$(function() {
$( "t1" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );    
$( "t2" ).slideUp( 300 ).fadeIn( 400 );
$( "t3" ).slideUp( 300 ).fadeIn( 400 );
});
</script>

请忽略数量和时间间隔，我只需要60秒即可使用JQuery或Javascript进行上面提到的操作... 我没有想出这个过程。

Answer 1

您需要为每个选择器添加#。

$( "#t1" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "#t2" ).slideUp( 300 ).fadeIn( 400 );
$( "#t3" ).slideUp( 300 ).fadeIn( 400 );

Answer 2

以下是我的代码可能对您有帮助 -

JSFiddle

HTML CODE

<h1>Table Hide Show Code</h1>
<table id="t1" class="active">
    <tr>
        <td> Table 1</td>
    </tr>
</table>
<table id="t2" class="removeActive">
    <tr>
        <td> Table 2</td>
    </tr>
</table>
<table id="t3" class="removeActive">
    <tr>
        <td> Table 3</td>
    </tr>
</table>

CSS代码

.active{
  display:block;
}
.removeActive{
  display:none;
}

JAVASCRIPT CODE

function toggleTable(){
    if($('#t1').hasClass('active')){
    $('table').removeClass('active').addClass('removeActive');
    $('#t2').removeClass('removeActive').addClass('active');
    }
  else if($('#t2').hasClass('active')){
    $('table').removeClass('active').addClass('removeActive');;
    $('#t3').removeClass('removeActive').addClass('active');
    }
  else if($('#t3').hasClass('active')){
    $('table').removeClass('active').addClass('removeActive');;
    $('#t1').removeClass('removeActive').addClass('active');
    }
};
var toggle = setInterval(function(){toggleTable()},60000);

使用Jquery或Javascript隐藏/取消隐藏html元素

2 个答案: