製作元素更改而不刷新頁面

所以我需要做出這樣的事情 - http://jsfiddle.net/3nk8x98g/1/一切都在鏈接中解釋。製作元素更改而不刷新頁面

我該用Javascript還是AJAX？也許有人知道一個教程或其他東西？謝謝。

<body> 

    <div class="row"> 
     <a href="#">BUTTON1</a> 
     <a href="#">BUTTON2</a> 
     <a href="#">BUTTON3</a> 
    </div> 

    <div class="row background"> 
     Changing content, this content changes depending on which button you press. Without refreshing the page. 
    </div> 

</body>

來源

2015-07-02 TacoCat

*「我使用Javascript或AJAX？」* - 您會使用JavaScript，是的。可能還有Ajax，它會涉及編寫Javascript代碼以發出Ajax請求。 – nnnnnn

你可以這樣做。 Ajax僅用於從服務器獲取數據而無需刷新，但必須使用javascript將該內容動態地附加到html。

$('a').on('click', function(){ 
    $('#changeingDiv').html('Changed Content'); 
} 
);

這僅僅是舉例。將一個事件綁定到按鈕上，並在其點擊時更改div的內容。對於不同的按鈕點擊不同的內容，您可以添加ID給他們，並在某些情況下相應地更改內容。

http://jsfiddle.net/3nk8x98g/2/

來源

2015-07-02 10:10:32 Newinjava

AJAX只是一個JavaScript技術，所以還沒有，你需要使用AJAX和JavaScript。查看這個例子，瞭解如何使用JavaScript實現它。

<body> 
    <div class="row"> 
    <a id="one" href="#">BUTTON1</a> 
    <a id="two" href="#">BUTTON2</a> 
    <a id="three" href="#">BUTTON3</a> 
    </div> 
    <div id="content" class="row background"> 
    Changing content, this content changes depending on which button you press. Without refreshing the page. 
    </div> 
    <script> 
    var one = document.getElementById("one"); 
    var two = document.getElementById("two"); 
    var three = document.getElementById("three"); 
    var content = document.getElementById("content"); 

    one.addEventListener("click", function() { 
     content.innerHTML = "One"; 
    }); 

    two.addEventListener("click", function() { 
     content.innerHTML = "Two"; 
    }); 

    threee.addEventListener("click", function() { 
     content.innerHTML = "Three"; 
    }); 
    </script> 
</body>

來源

2015-07-02 10:13:05

製作元素更改而不刷新頁面

回答

相關問題