gpt4 book ai didi

javascript - 单击时显示/隐藏按钮

转载 作者:行者123 更新时间:2023-11-29 22:19:05 24 4
gpt4 key购买 nike

我想要两个按钮,它们在单击时相反显示或隐藏。 (即通过 style:display=none|block;)。

最初,button1 是 display:block,button2 是 display:none。

当你点击 button1 时,它会将 button2 切换为 display:block,将 button1 切换为 display:none。

我知道这可能很简单,请原谅我的知识不足。

最佳答案

首先我们创建两个按钮。给它们 id 属性,这样我们就有了一个访问它们的别名:

<button id="first">Click</button> <button id="second">Second</button>

按照您的定义设置 CSS:

#first  { display: block; }
#second { display: none; }

然后是 JS。我们使用名为 document.getElementById() 的函数通过它们的 ID 访问这两个元素。这将返回具有指定 ID 的元素。

var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );

现在我们可以创建一个toggle 函数。这里是概念:如果第一个元素的display属性是“block”,那么我们把它改成“none”,我们把后者改成“block”。反之亦然。在这里:

function toggle() {

if ( first.style.display === "block" ) {

first.style.display = "none";
second.style.display = "block";

} else { // switch back

first.style.display = "block";
second.style.display = "none";

}

}

然后我们在 HTML 中设置事件处理程序:

<button id="first" onclick="toggle();">First</button>
<button id="second" onclick="toggle();">Second</button>

或者我们可以使用 JS 来完成:

first.onclick = toggle;
second.onclick = toggle;

我更喜欢第二种,我们会坚持下去,

就是这样。您可以在这里找到一个工作示例 -- http://jsfiddle.net/twEK5/

关于javascript - 单击时显示/隐藏按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13408223/

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