Question

所以我有一个个人资料页面，状态更新/墙，我在页面上限制了“关于”信息，我有文字说“关于我......”我想把它变成一个链接，哪个单击时，隐藏“墙”并将其替换为“关于”信息。我不知道如何做到这一点，我尝试了一些JavaScript方法，但他们根本没有工作。

我已经尝试过几天了。任何帮助都会很棒！

Answer 1

你可以做一个简单的纯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 2

您可以使用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();
    });
});

Answer 3

$("#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>

更改数据而不刷新页面

3 个答案: