Question

所以我需要做出类似这样的事情 - 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>

Answer 1

你可以这样做。 Ajax只是用于从服务器获取数据而不刷新，但您必须使用javascript动态地将该内容附加到html。

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

这只是一个例子。将事件绑定到按钮，并在其单击时更改div的内容。对于不同按钮单击的不同内容，您可以在其中添加ID并在某些条件下相应地更改内容。

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

Answer 2

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>

在不刷新页面的情况下更改元素

2 个答案: