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

Hide/Unhide html elements using Jquery or Javascript

本文关键字：隐藏 取消 html 元素 使用 Javascript Jquery      更新时间：2023-09-26

我想知道你是否可以帮我完成这段代码，我有一个包含三个表的 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 执行我上面提到的操作......我不明白这个过程。

这是我

的代码，它可以帮助你 -

JSFiddle

网页代码

<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 代码

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);
您需要向

每个选择器添加#。

$( "#t1" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "#t2" ).slideUp( 300 ).fadeIn( 400 );
$( "#t3" ).slideUp( 300 ).fadeIn( 400 );
相关文章：