Question

对于那些正在阅读本文的人来说，只是感谢您试图帮助我。

无论如何，我是编码的初学者。我的问题是我有一些按钮，它实际上是一个主题布局我试图实现作为一个年轻的新手，但我似乎无法弄清楚如何使这些按钮被点击并加载只有1个特定页面中的框。其他人说它可以通过Ajax或JQuery或Javascript完成，但我不知道，我只知道HTML / CSS，而且它真的......我甚至都不知道我想要发生的这个术语是什么。 / p>

有人可能会给我最简单的解决方案或示例吗？

我确实尽我所能通过自己的研究和研究，但我想我的技能还不是很有才能尚未解决问题。甚至试过向我的天才兄弟寻求帮助，但到目前为止，即使我正在努力学习，他也从未为我做过任何事情或帮助我。正如他经常说的那样，他只是忙碌。

这是我到目前为止所做的尝试：http://animiao.com/IMVU%20Coding/sample3.php Perse，假设是一个默认显示的框（例如主页），其余的3个按钮假设显示自己的信息。

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

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

Answer 1

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

解决它的最简单方法是将内容div包装在另一个div中：

<div id="content_wrapper">
    <div id="random">something...</div>
    <div id="chat">something...</div>
    ...
</div>

然后用这个JS隐藏你不想要的那些：

var contents = document.getElementById('content_wrapper').childNodes,
    i = 0,
    i_max = contents.length;
for (i; i < i_max; i++) {
    contents[i].style.display = 'none';
 }

使用“show”代码

var el = document.getElementById(id);
if (el.style.display == 'none')
    el.style.display = 'block';

这可以简单地压缩到更少的代码，但也会让你不太明白，所以我现在就把它留下来。

Answer 2

如果你学习了一些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>

现在创建一个文件，比如说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>

尝试加载a.html

Answer 3

问题是当你显示一个你没有隐藏其他元素的元素时：如果你这样做

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';

Answer 4

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>

jquery：如果您不知道如何在页面中使用jquery代码，请将jquery或javascript代码放在此标记内。

$(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);
   });
});

不要忘记在头标记中导入jquery库。此处还有您可以测试的代码：http://jsfiddle.net/4BpLg/6/

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

4 个答案: