Javascript 单击链接后，如何更改延迟链接

也许我的问题很傻，答案也很简单，但我对HTML和javascript都是新手，我需要你的帮助。实际上这是我创建的第一个网站

我的问题是这个。我的网站上有2个链接

<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link</button></a>

<a id="second" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>

最初，我需要显示第一个链接按钮，当它被点击时，链接按钮应该消失，一条消息说“正在检查…”应该显示10秒钟，然后第二个链接按钮应该出现

因此，这3个元素（按钮1、消息、按钮2）中的每一个都应该逐个可见

我不知道这是否有帮助，但我正在我的网站上使用jquery-1.10.2.js

你们谁能帮我一个解决办法吗

---

提前谢谢你

只需在页面中包含所有元素，并根据您的流显示/隐藏即可

$（'first'）。在（'click'，function（）上{
$（this.hide（）；
$（“#消息”）.show（）；
setTimeout（函数（）{
$（“#秒”）.show（）；
$（“#消息”）.hide（）；
}, 10000);
});

正在检查

只需在页面中包含所有元素，并根据流显示/隐藏即可


$（'first'）。在（'click'，function（）上{
$（this.hide（）；
$（“#消息”）.show（）；
setTimeout（函数（）{
$（“#秒”）.show（）；
$（“#消息”）.hide（）；
}, 10000);
});

正在检查

像这样的东西？这是纯javascript


first.onclick=（函数（）{
first.style.display=“无”
second.style.display=“块”
setTimeout（函数（）{
second.style.display=“无”
third.style.display=“块”
},5000)
})
第二，第三{
显示：无
}

.... 等5秒钟
像这样的东西？这是纯javascript


first.onclick=（函数（）{
first.style.display=“无”
second.style.display=“块”
setTimeout（函数（）{
second.style.display=“无”
third.style.display=“块”
},5000)
})
第二，第三{
显示：无
}

.... 等5秒钟

使用jQuery，这也是一种可能的方法：

$（'first'）。在（'click'，function（）上{
//第一个按钮的父元素
var parent=this.parentElement；
//显示消息
$（父项）。追加（“正在检查…”
）
//移除第一个按钮
$（this.remove（）；
//设置父级的html内容，仅包括第二个按钮（1秒后）
setTimeout（函数（）{
$（parent.html（“”）；
}, 1000)
});
使用jQuery，这也是一种可能的方法：


$（'first'）。在（'click'，function（）上{
//第一个按钮的父元素
var parent=this.parentElement；
//显示消息
$（父项）。追加（“正在检查…”
）
//移除第一个按钮
$（this.remove（）；
//设置父级的html内容，仅包括第二个按钮（1秒后）
setTimeout（函数（）{
$（parent.html（“”）；
}, 1000)
});
您可以通过向容器元素添加状态类来更改所有3个按钮

在CSS中：


仅在空状态下显示
#第一个
链接（无类）

仅在加载状态下显示加载…
链接
仅在
ready
状态下显示
#第三个
链接


然后，在JavaScript中，只需添加\删除正确的类：


first.onclick=（函数（）{
container.classList.add（'load'）；
返回setTimeout（函数（）{
container.classList.remove（'load'）；
container.classList.add（'ready'）；
}, 5000);
});
.action容器：不是（.loading）#秒，
.操作容器：未（.ready）#第三个{
显示：无
}
.action-container.load#首先，
.action-container.ready#first{
显示：无；
}

.... 等5秒钟
您可以通过向容器元素添加状态类来更改所有3个按钮

在CSS中：


仅在空状态下显示
#第一个
链接（无类）

仅在加载状态下显示加载…
链接
仅在
ready
状态下显示
#第三个
链接


然后，在JavaScript中，只需添加\删除正确的类：


first.onclick=（函数（）{
container.classList.add（'load'）；
返回setTimeout（函数（）{
container.classList.remove（'load'）；
container.classList.add（'ready'）；
}, 5000);
});
.action容器：不是（.loading）#秒，
.操作容器：未（.ready）#第三个{
显示：无
}
.action-container.load#首先，
.action-container.ready#first{
显示：无；
}

.... 等5秒钟
那么，单击该链接不会将您带到该页面吗？不清楚您将如何等待…是的，但用户将返回到我的页面。。。这应该是一个链接锁。如果要显示第二个链接并超时，请单击“更改文本”为什么链接标签中有一个按钮？那么，单击链接不会将您带到该页面吗？不清楚您将如何等待…是的，但用户将返回到我的页面。。。这应该是一个链接锁。若要显示第二个链接并显示超时，请单击“更改文本”为什么链接标记中有一个按钮？