4

对于那些正在阅读本文的人，我会很感激你试图帮助我。

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

谁能给我最简单的解决方案或示例让我遵循？

我确实尽我所能通过自己和研究来做到这一点，但我想我的技能还没有足够的天赋来解决这个问题。甚至尝试向我的天才兄弟寻求帮助，但到目前为止，即使我只是想学习，他也从来没有为我做任何容易的事情或帮助我。他只是很忙，就像他经常说的那样。

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

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

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

4

4 回答 4

0

所有的<div>s 都堆叠在一起，没有一个z-index用 CSS 指定。因此，出现在顶部的将是
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';
 }

然后使用您的“显示”代码：

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

这可以轻松地压缩为更少的代码，但也会让您不太容易理解，所以我暂时保留它。

于 2012-10-12T12:59:26.067 回答
0

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

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';
于 2012-10-12T13:13:04.487 回答
0

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

不要忘记在 head 标签中导入 jquery 库。这里还有你可以测试的代码：http: //jsfiddle.net/4BpLg/6/

于 2012-10-12T13:36:11.807 回答
0

学一点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

于 2012-10-12T13:02:55.300 回答