更改數據而不刷新頁面

Question

所以我有一個配置文件頁面，狀態更新/牆，我有限的頁面上的「關於」信息，我有文字說「更多關於我..」，我想轉進入一個鏈接，點擊時，隱藏「牆」並用「關於」信息替換它。我不知道如何做到這一點，我嘗試了一些JavaScript方法，但他們甚至都沒有工作。

我試圖讓這項工作幾天。任何幫助將是偉大的！

Answer 1

$("#more_about_me").on('click', function() { 
 
    $("#wall").hide(); 
 
    $("#more_about_me").hide(); 
 
    $("#about_text").show(); 
 
}); 
 
$("#less_about_me").on('click', function() { 
 
    $("#wall").show(); 
 
    $("#more_about_me").show(); 
 
    $("#about_text").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wall"> 
 
    <h3>Wall</h3> 
 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book 
 
</div> 
 
<h3>About Me</h3> 
 
Lorem Ipsum has been the industry's standard dummy text. 
 
<a href="javascript:;" id="more_about_me">More About me</a> 
 
<div id="about_text" style="display:none"> 
 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    <a href="javascript:;" id="less_about_me">Less About me</a> 
 
</div>

Answer 2

你可以做一個純js的ajax調用或更簡單的jQuery ajax調用。

<div id="about"><h2>About.....</h2></div> 

<button>Load more</button> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 

    $("#about").append("<div></div>"); //append a div inside hold the content to be loaded 

    $("#about>div").load("url of file to be loaded"); // load the content into children div 

    }); 
}); 
</script> 

Answer 3

您可以使用jQuery ajax。

HTML：

<div class="sidebar"> 
    <div class="wall"> 
     My Wall Content 
    </div> 
    <div class="about-us-more" style="display:none;"> 
     Initially hidden 
    </div> 
</div> 
<div class="main"> 
    <button type="button" id="load-more-about-us">More Info</button> 
</div> 

JQUERY AJAX

$("#load-more-about-us").click(function(){ 
    $.get("get_more_about_us.php", function(data, status){ 
     $(".wall").hide(); 
     $(".about-us-more").show(); 
    }); 
});