單擊鏈接后，窗口未立即加載

Question

當我單擊錨鏈接時，應立即再次加載當前頁面：

<a href="javascript:void(0);" class="BackToFirst"  
 onclick="popNav('BackToFirst');">Back</a>

function popNav(type) {
    if(type == "BackToFirst") {
       $(".first").show();
       $(".second").hide();
       $('.BackToFirst').click(function() {
           document.location.href =  window.location.href;
       });
    }
}

我希望當用戶點擊鏈接時，當前頁面會立即加載，但需要一些時間才能加載。

Answer 1

您的Click處理程序僅為鏈接分配一個新的單擊處理程序，請嘗試直接導航：

 function popNav(type){
    if(type=="BackToFirst")
     {
        $(".first").show();
        $(".second").hide();
        document.location.href =  window.location.href;
     }
  }

我認為你有兩個概念混淆了，上面的代碼將DOM事件直接附加到鏈接上，另一種方法是使用JQuery將事件附加到該按鈕，如下所示：

HTML：

<a href="javascript:void(0);" class="BackToFirst">Back</a>

腳本：

   $('.BackToFirst').click(function(){
       $(".first").show();
       $(".second").hide();
       document.location.href =  window.location.href;
   });

如果您仍想檢查類型，那么使用JQuery時數據屬性是一個很好的方法：

<a href="javascript:void(0);" class="BackToFirst" data-linktype="BackToFirst">Back</a>

   $('.BackToFirst').click(function(){
       if($(this).data('linktype') == 'BackToFirst'){
            $(".first").show();
            $(".second").hide();
            document.location.href =  window.location.href;
       }
   });

Answer 2

我認為你的代碼過於復雜。 單擊元素后綁定onClick。 我認為這樣的事情會更好。

HTML：

<a href="#" class="BackToFirst" onclick="onClickHandler('BackToFirst')">Back</a>

JS：

function onClickHandler(type){
    if(type !== 'BackToFirst') {
        return;
    }
    $(".first").show();
    $(".second").hide();
    location.reload();
}

Answer 3

目前還不清楚你要做什么。

1. 重新加載頁面時，會立即撤消顯示/隱藏
2. 建議使用location.reload（1）而不是設置所謂的只讀document.location
3. 您可能希望使用e.preventDefault而不是javascript void
4. 你絕對相信這不是X / Y問題嗎？ 你能解釋實際的用例嗎？

var current = sessionStorage.getItem("which"); // does not run in a snippet
current = current ? current.split("|") : []
if (current.length) {
  $("." + current[0]).show();
  $("." + current[1]).hide();
}
$(".BackToFirst").on("click", function(e) {
  e.preventDefault();
  $(".first").show();
  $(".second").hide();
  sessionStorage.setItem("which", "first|second")
  setTimeout(function() {
    location.reload(1); // are you absolutely sure this is not an X/Y problem?
  }, 500); //let the show/hide sink in  
});

<a href="#" class="BackToFirst">Back</a>