當href鏈接被點擊在html頁面的div內時顯示加載文本或圖像

我正在製作一個網站，有大量的Notes和要下載的書籍。我想單擊鏈接爲下載鏈接時顯示任何圖像或任何文本，當請求完成並且文件開始下載時，請刪除圖像或加載文本。當href鏈接被點擊在html頁面的div內時顯示加載文本或圖像

我已經經歷了很多論壇，但找不到任何解決方案。

這裏是我的

<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; "> 
 
    
 
    <ol class="tree"> 
 
    
 
    <li> 
 
     <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

任何幫助會非常感激的HTML文件。

來源

2017-10-15 BlueYeti24

單擊事件是由jQuery的.on("click",function(){})處理，但是當下載完成文件，我的信息是基於這個問題＃1的，我們不能處理：Browser event when downloaded file is saved to disk

$(".file a").on("click",function(e){ 
 
    var originalHtml=$(this).html(); 
 
    $(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here 
 
    e.preventDefault(); 
 
    var destination = this.href; 
 
    var clickedLink=$(this); 
 
    setTimeout(function() { 
 
     clickedLink.html(originalHtml); 
 
     window.location = destination; 
 

 
    },1000); 
 
    $('<iframe>').hide().appendTo('body').load(function() { 
 
     window.location = destination; 
 
    }).attr('src', destination); 
 
});

.loader, 
 
.loader:before, 
 
.loader:after { 
 
    border-radius: 50%; 
 
    width: 2.5em; 
 
    height: 2.5em; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
    -webkit-animation: load7 1.8s infinite ease-in-out; 
 
    animation: load7 1.8s infinite ease-in-out; 
 
} 
 
.loader { 
 
    color: darkblue; 
 
    font-size: 10px; 
 
    margin: 80px auto; 
 
    position: relative; 
 
    text-indent: -9999em; 
 
    -webkit-transform: translateZ(0); 
 
    -ms-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-animation-delay: -0.16s; 
 
    animation-delay: -0.16s; 
 
} 
 
.loader:before, 
 
.loader:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.loader:before { 
 
    left: -3.5em; 
 
    -webkit-animation-delay: -0.32s; 
 
    animation-delay: -0.32s; 
 
} 
 
.loader:after { 
 
    left: 3.5em; 
 
} 
 
@-webkit-keyframes load7 { 
 
    0%, 
 
    80%, 
 
    100% { 
 
    box-shadow: 0 2.5em 0 -1.3em; 
 
    } 
 
    40% { 
 
    box-shadow: 0 2.5em 0 0; 
 
    } 
 
} 
 
@keyframes load7 { 
 
    0%, 
 
    80%, 
 
    100% { 
 
    box-shadow: 0 2.5em 0 -1.3em; 
 
    } 
 
    40% { 
 
    box-shadow: 0 2.5em 0 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; "> 
 
    
 
    <ol class="tree"> 
 
    
 
    <li> 
 
     <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

來源

2017-10-15 10:31:43

在這裏我修改了你的代碼，現在的工作方案是，

<script type="text/javascript"> 
 
    $(".file a").on("click",function(){ 
 
    $(this).text('Loading...'); // do your UI thing here 
 
    e.preventDefault(); 
 
    var destination = this.href; 
 
    setTimeout(function() { 
 
     window.location = destination; 
 
    },100); 
 
    $('<iframe>').hide().appendTo('body').load(function() { 
 
     window.location = destination; 
 
    }).attr('src', destination); 
 
}); 
 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; "> 
 
    
 
    <ol class="tree"> 
 
    
 
    <li> 
 
     <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

但它不會回到原來的文字，並永久卡在加載。

來源

2017-10-15 11:53:46 BlueYeti24

我編輯我的答案和它的工作，如果有幫助，請記得要點擊**複選標記**我的回答的左側，予以批准。我們將幫助其他與您具有相同問題的用戶尋找解決方案。最好的問候 –

@MehdiBouzidi謝謝..這正是我所需要的。最後一個問題...如何更改文本加載的字體大小和字體顏色。如果我想加載加載GIF而不是相同的時間..我該怎麼做？例如，如果我想從這裏的任何GIF相同的時間https://projects.lukehaas.me/css-loaders/我應該怎麼做 – BlueYeti24

我再次編輯我的答案檢查，看看結果:)好運氣 –

這裏我找到了另一個加載gif的解決方案，這將是一個最好的選擇，但問題是它不會消失並繼續加載。如何在一段時間後結束並返回原始狀態。

$(".file a").on("click",function(){ 
 
    $(this).parent().parent().append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>'); 
 
$(window).on('load', function(){ 
 
    setTimeout(removeLoader, 100); //wait for page load PLUS two seconds. 
 
}); 
 
function removeLoader(){ 
 
    $("#loadingDiv").fadeOut(0, function() { 
 
     // fadeOut complete. Remove the loading div 
 
     $("#loadingDiv").remove(); //makes page more lightweight 
 
    }); 
 
} 
 

 
});

.loader, 
 
     .loader:after { 
 
      border-radius: 50%; 
 
      width: 10em; 
 
      height: 10em; 
 
     } 
 
     .loader {    
 
      margin: 60px auto; 
 
      font-size: 10px; 
 
      position: relative; 
 
      text-indent: -9999em; 
 
      border-top: 1.1em solid rgba(255, 255, 255, 0.2); 
 
      border-right: 1.1em solid rgba(255, 255, 255, 0.2); 
 
      border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); 
 
      border-left: 1.1em solid #ffffff; 
 
      -webkit-transform: translateZ(0); 
 
      -ms-transform: translateZ(0); 
 
      transform: translateZ(0); 
 
      -webkit-animation: load8 1.1s infinite linear; 
 
      animation: load8 1.1s infinite linear; 
 
     } 
 
     @-webkit-keyframes load8 { 
 
      0% { 
 
       -webkit-transform: rotate(0deg); 
 
       transform: rotate(0deg); 
 
      } 
 
      100% { 
 
       -webkit-transform: rotate(360deg); 
 
       transform: rotate(360deg); 
 
      } 
 
     } 
 
     @keyframes load8 { 
 
      0% { 
 
       -webkit-transform: rotate(0deg); 
 
       transform: rotate(0deg); 
 
      } 
 
      100% { 
 
       -webkit-transform: rotate(360deg); 
 
       transform: rotate(360deg); 
 
      } 
 
     } 
 
     #loadingDiv { 
 
      position:absolute;; 
 
      top:0; 
 
      left:0; 
 
      width:100%; 
 
      height:100%; 
 
      background-color:#000; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; "> 
 
    
 
    <ol class="tree"> 
 
    
 
    <li> 
 
     <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

來源

2017-10-15 12:49:25 BlueYeti24

當href鏈接被點擊在html頁面的div內時顯示加載文本或圖像

回答

相關問題