單擊鏈接后如何延遲更改鏈接

Question

也許我的問題很愚蠢，答案很簡單，但是我是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。

你們中的任何一個可以幫助我解決問題嗎？

先感謝您！

Answer 1

像這樣嗎 這是純JavaScript。

 first.onclick = (function(){ first.style.display = "none" second.style.display = "block" setTimeout(function(){ second.style.display = "none" third.style.display = "block" },5000) }) 

 #second, #third { display: none } 

 <a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link Click me</button></a> <span id="second">.... Wait 5s</span> <a id="third" href="#">YOUR LINK</a> 

Answer 2

只需在頁面中包含所有元素，然后根據您的流程顯示/隱藏即可。

 $('#first').on('click', function() { $(this).hide(); $('#message').show(); setTimeout(function() { $('#second').show(); $('#message').hide(); }, 10000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link</button></a> <p id="message" style="display:none;">Checking...</p> <a id="second" style="display:none;" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a> 

Answer 3

您可以通過向容器元素添加狀態類來更改所有3個按鈕。

在CSS中 ：

• 僅在空狀態下顯示#first鏈接（無類）
• 僅在loading狀態下顯示loading...鏈接
• 僅在ready狀態下顯示#third鏈接

然后，在JavaScript中 ，您所需要做的就是添加\\刪除正確的類：

 first.onclick = (function() { container.classList.add('loading'); return setTimeout(function() { container.classList.remove('loading'); container.classList.add('ready'); }, 5000); }); 

 .action-container:not(.loading) #second, .action-container:not(.ready) #third { display: none } .action-container.loading #first, .action-container.ready #first { display: none; } 

 <div class="action-container" id="container"> <a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link Click me</button></a> <span id="second">.... Wait 5s</span> <a id="third" href="#">YOUR LINK</a> </div> 

Answer 4

使用jQuery，這也是一種可行的方法：

 $('#first').on('click', function() { // Parent Element of the first button var parent = this.parentElement; // Show message $(parent).append('<p>Checking...</p>') // Remove first button $(this).remove(); // Set html content of parent including only the second button (after 1 second) setTimeout(function() { $(parent).html('<a id="second" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>'); }, 1000) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <a id="first" href="#" target=""><button class="btn-icon btn-icon-check">First Link</button></a>