使用jquery打開一個頁面不加載使用

我有這個網頁，我只是爲了開始使用網頁，基於這個模板。使用jquery打開一個頁面不加載使用

http://ironsummitmedia.github.io/startbootstrap-freelancer/#

在哪裏點擊組合中的縮略圖，另一個網頁圖片上的更多詳細信息打開。我寫的代碼正在加載頁面。我想完全按照這個模板來實現它。

HTML（用於縮略圖）：

<div class = "pictures "> 
      <div class = "container "> 
       <div > 

        <center><b><text>PORTFOLIO</text></b></center> 
       </div> 
       <div class = "pics"> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img data-src = "glass.png" src = "cabin.png" id="cabin" alt="" /> 
        </div> 

        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "cake.png" id="cake" alt="" /> 
        </div> 
        </div> 
       </div> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img data-src = "glass.png" src = "circus.png" id="circus" alt="" /> 
        </div> 

        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "game.png" id="game" alt="" /> 
        </div> 

        </div> 
        </div> 
        <div class = "column"> 
        <div class = "col-md-4"> 
        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "safe.png" id="safe" alt="" /> 
        </div> 

        <div class = "thumbnail"> 
         <img data-src="glass.png" src = "submarine.png" id="submarine" alt="" /> 
        </div> 
        </div> 

        </div> 
        </div> 
      </div> 
     </div>

jQuery的打開新的一頁：

$(".pictures .thumbnail img").click (function() { 
        window.location.href = this.id +".html"; 

       });

我應該讓我的代碼，讓我沒有打開的頁面加載/清爽什麼樣的變化？

在此先感謝！

來源

2015-07-21 Rimil Dey

這是一個漫長的過程，你需要開始閱讀** jquery ajax（）**，你將學到如何去做 –

你究竟是什麼意思？頁面沒有加載或刷新「？ – Pointy

您鏈接的頁面使用模態（Bootstrap modals：http://getbootstrap.com/javascript/#modals）。 – kingdamian42

你應該學習一些AJAX來達到這個目的。閱讀jQuery Docs on AJAX瞭解更多信息。

阿賈克斯是一個客戶端腳本，並從服務器/數據庫通信，而不需要回發或一個完整的頁面刷新。我爲Ajax讀過的最好的定義是「與服務器交換數據，更新網頁部分的方法 - 無需重新加載整個頁面。」來源：Seguetech

下面是一些AJAX和jQuery示例：

$(document).ready(function(e) { 

    $("form[ajax=true]").submit(function(e) { 

     e.preventDefault(); 

     var form_data = $(this).serialize(); 
     var form_url = $(this).attr("action"); 
     var form_method = $(this).attr("method").toUpperCase(); 

     $("#loadingimg").show(); 

     $.ajax({ 
      url: form_url, 
      type: form_method,  
      data: form_data,  
      cache: false, 
      success: function(returnhtml){       
       $("#result").html(returnhtml); 
       $("#loadingimg").hide();      
      }   
     });  

    }); 

});

DEMO

是大膽無畏。它看起來有點令人困惑，特別是從jQuery開始，但相信我不是。你會很高興你學到了它。

來源

2015-07-21 13:07:20 Lansana

謝謝:)我想我會回來一次，我知道ajax了一下！ –

您所指的模板使用引導模式。同時爲了獲取數據以填充模式，您需要了解Ajax。 Boy Wonder已經給出了一個定義。但是，您也可以在不從服務器站點獲取數據的情況下填充模塊，但它畢竟可以是靜態的。你可以從這裏瞭解到引導模式http://getbootstrap.com/javascript/#modals

來源

2015-07-21 13:46:18

好的。我會仔細看看的。謝謝:) –

不客氣:) –

使用jquery打開一個頁面不加載使用

回答

相關問題