在點擊時在框中加載新內容

Question

我正在嘗試創建此框，並且當您單擊它時，將加載新文本。 的HTML代碼如下：

<div class="hPage"><a name="Project">PROJECT</a> 
    <div class="boxP" style="width:960px;height:840px;border:1px solid black;"> 
     <div class="gallery"> 
      <div id="div1"> 
       First story to be read    
      </div> 
      <div id="div2"> 
       Second story to be read 
      </div> 
      <div id="div3"> 
       Third story to be read 
      </div> 
     </div> 
    </div> 
</div> 

我曾嘗試使用jQuery的點擊功能的工作，但我一直無法得到它正常工作。有誰知道如何完成它？

Answer 1

你的點擊功能在哪裏？總之，功能應該是這樣的：

$(document).ready(function() { 
    $(".boxP").click(function() { 
    $(this).html("Loading new content...").load("URL"); 
    }); 
}); 

這將激活你每次點擊<div>時間AJAX調用。一旦點擊，它會顯示一條消息"Loading new content..."。一旦從URL中獲取內容，它就會加載到<div>中。

Answer 2

嘗試......

(function() 
{ 
    var divName, divNumber; 
    $('.hPage > .boxP > .gallery > div').hide(); 
    $('.hPage > .boxP > .gallery > div#div1').show() 
    $('.hPage > .boxP > .gallery > div').on('click', function() 
    { 
     divName = $(this).attr('id'); 
     divNumber = parseInt(divName.substring(3, 4)); 
     divNumber++; 
     $(this).hide(); 
     $('.hPage > .boxP > .gallery > div#div'+divNumber).show(); 
    });  
})();