Fatal编程技术网
  • javascript/
  • Javascript 如何将按钮加载到同一页面？

Javascript 如何将按钮加载到同一页面？

javascript jquery ajax button html

Javascript 如何将按钮加载到同一页面？,javascript,jquery,ajax,button,html,Javascript,Jquery,Ajax,Button,Html,对于那些正在阅读本文的人，我已经非常感谢你帮助我了 不管怎样，我是一个编码的初学者。我的问题是，我有一些按钮，这实际上是一个主题布局，我作为一个年轻的新手试图实现，但我似乎不知道如何使这些按钮得到点击，并加载到一个页面中的一个特定框。其他人说它可以通过Ajax、JQuery或Javascript完成，但我不知道，我只知道HTML/CSS，这就是它真正的。。。我甚至不知道我想发生的这个术语叫什么 有谁能给我一个最简单的解决方案或例子让我效仿 我确实尽了我最大的努力，通过自己的努力和研究，但我想我的

对于那些正在阅读本文的人，我已经非常感谢你帮助我了

不管怎样，我是一个编码的初学者。我的问题是，我有一些按钮，这实际上是一个主题布局，我作为一个年轻的新手试图实现，但我似乎不知道如何使这些按钮得到点击，并加载到一个页面中的一个特定框。其他人说它可以通过Ajax、JQuery或Javascript完成，但我不知道，我只知道HTML/CSS，这就是它真正的。。。我甚至不知道我想发生的这个术语叫什么

有谁能给我一个最简单的解决方案或例子让我效仿

我确实尽了我最大的努力，通过自己的努力和研究，但我想我的技能还不足以解决这个问题。我甚至试着向我的天才兄弟寻求帮助，但到目前为止，即使我只是想学习，他也从来没有帮过我。正如他常说的，他只是很忙

到目前为止，我一直在尝试这样做： 尽管如此，默认情况下会出现一个框（比如主页），其余3个按钮都会显示自己的信息

问题： 它们仅在我单击聊天>消息>添加按钮时按顺序显示，而不是按任何其他顺序显示。 当我再次单击它们时，它们不会显示

我猜我的方法是错误的，请帮忙。

所有的
都是堆叠在一起的，没有一个是用CSS指定的
z-index
。因此，出现在顶部的将是
a） HTML代码中的最后一个
和b）可见

最简单的修复方法是将内容div包装到另一个div中：

<div id="content_wrapper">
    <div id="random">something...</div>
    <div id="chat">something...</div>
    ...
</div>
这可以很容易地浓缩成更少的代码，但也会让您不太容易理解，所以我现在就不说了。

如果您学习一点javascript，这不会有什么坏处 javascript的简单示例

将这两行另存为ajax_sample.txt

<p>AJAX is not a new programming language.</p>

<p>AJAX is a technique for creating fast and dynamic web pages.</p>
AJAX不是一种新的编程语言

AJAX是一种创建快速动态网页的技术

现在创建一个类似于a.html的文件

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>


函数loadXMLDoc（）
{
var-xmlhttp；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“myDiv”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“ajax_info.txt”，true）；
xmlhttp.send（）；
}
让AJAX更改此文本
更改内容
尝试加载a.html

问题在于，当您显示一个元素时，您没有隐藏其他元素： 例如，如果你这样做了

var el = document.getElementById(id);//id = chat
if (el.style.display == 'none')
您还需要隐藏其他元素：

 var message = document.getElementById('message');
 var add = document.getElementById('add');
 message.style.display == 'none';
 add .style.display == 'none';
html部分：

<input type="button" id="button1" value="Button1"></input>
<input type="button" id="button2" value="Button2"></input>
<input type="button" id="button3" value="Button3"></input>

<div id="content-of-button">

</div>
不要忘记在head标记中导入jquery库。这里还有您可以测试的代码：

这里有一个关于这方面的教程。因为这并不能解释每一个步骤，所以您可能需要谷歌“jqueryajax网站教程”（可能还会在其中添加php…）。不过，在解决这个问题之前，您可能需要学习jquery的基础知识。。（否则，您可能最终只是复制粘贴所有内容，而没有在过程中学习任何内容。）相关但不是必需的：无需学习（但是，如果您自己做，而不是拖放解决方案，那么有很多东西需要学习，如果这是您的意图，很好。）请参见我今天早些时候的回答（不是PHP，而是Javascript） 
 var message = document.getElementById('message');
 var add = document.getElementById('add');
 message.style.display == 'none';
 add .style.display == 'none';

<input type="button" id="button1" value="Button1"></input>
<input type="button" id="button2" value="Button2"></input>
<input type="button" id="button3" value="Button3"></input>

<div id="content-of-button">

</div>

$(document).ready(function(){
   var button1content='Button 1 content';
   var button2content='Button 2 content';
   var button3content='Button 3 content';

   $('#button1').click(function(){
      $('#content-of-button').html(button1content);  //here .html overwrites the text inside of the target div          
      //you can also use .append() but it will add the text, not overwrite
   });

   $('#button2').click(function(){
      $('#content-of-button').html(button2content);
   });

   $('#button3').click(function(){
      $('#content-of-button').html(button3content);
   });
});