gpt4 book ai didi

javascript - 向预先存在的脚本中添加一次显示一次的功能和幻灯片动画

转载 作者:行者123 更新时间:2023-12-03 06:08:40 25 4
gpt4 key购买 nike

所以我在我的网站上使用了一个效果很好的显示/隐藏脚本。但是有 1 个问题和 1 个请求。

  1. 一次只允许显示 1 个 div
  2. 当 div 出现时,让它从标题下方“滑”入。

这是脚本:

    function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

以下是按钮如何与 HTML 中的 div 相关的工作方式:

<a onclick="toggle_visibility('testing');">Testing</a>

<div style="display:none;" id="testing">
testing for page 2
</div>

以下是有关幻灯片动画的屏幕布局:

enter image description here

如果有人可以帮助将这些函数添加到脚本中,或者他们有一个不同的脚本可以执行相同的操作但更好,请告诉我。谢谢

最佳答案

如果您想使用 jQuery,请查看 slideToggle():

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
var activeDiv = 'welcome';
function toggle_visibility(id) {
if ( activeDiv === id ) return;
$('#' + activeDiv).css('display','none');
activeDiv = id;
$('#' + id).slideToggle();
$('#' + id).css('display','block');
};
$(document).ready(function() {
$('#welcome').slideToggle();
});

</script>
</head>
<body>
<a onclick="toggle_visibility('testing');">Show the First DIV</a><br>
<a onclick="toggle_visibility('testing2');">Show the Second DIV</a>

<div style="display: none;" id="testing">
The First DIV
</div>

<div style="display: none;" id="welcome">
Welcome!
</div>

<div style="display: none;" id="testing2">
The Second DIV
</div>
</body>
</html>

关于javascript - 向预先存在的脚本中添加一次显示一次的功能和幻灯片动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39419722/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com