Fatal编程技术网
  • javascript/
  • Javascript 如何制作两个div，以便只显示一个div，并且可以实时交换它们？

Javascript 如何制作两个div，以便只显示一个div，并且可以实时交换它们？

javascript css function html

Javascript 如何制作两个div，以便只显示一个div，并且可以实时交换它们？,javascript,css,function,html,Javascript,Css,Function,Html,我正在尝试类似的方法，但似乎不起作用 JS: <script type="text/javascript"> function recent() { document.getElementById('top').style.display = "none"; document.getElementById('recent').style.display = "block"; alert('Recent'); } function top()

我正在尝试类似的方法，但似乎不起作用

JS:

<script type="text/javascript">
   function recent() {
    document.getElementById('top').style.display = "none";
    document.getElementById('recent').style.display = "block";
    alert('Recent');
   }
   function top() {
    alert('Top');
    document.getElementById('recent').style.display = "none";
    document.getElementById('top').style.display = "block";
   }
  </script>

  <div id="content">
   <div id="header"><a href="#" onClick="javascript:recent();">Recent</a> | <a href="#" onClick="javascript:top();">Top rated</a></div>
   <div id="top">
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="recent">
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>
任何帮助都将不胜感激

编辑

我在firefox上试用过，效果不错。新问题。为什么它在opera中不起作用？

尝试使用错误控制台

错误在于onClick处理程序中的“javascript:”部分。onClick中的所有内容都已经是javascript了

我还建议使用jQuery，它使您能够使用以下语句

$('#recent').show();
$('#top').hide();
不过，从原始javascript开始学习并不是一个坏主意。

只要您在脚本中足够早地定义了
最近的
和
top
函数，它就应该可以工作


这是（但请检查左侧设置的值）。
javascript:
是您的问题。这对于onclick属性是不正确的语法。这就是人们在将JavaScript放入href属性时使用的方法。移除它，它应该可以工作。
工作演示：

有几点


recent=function（）

单击事件时返回false可以防止默认行为：
onClick=“top（）；return false；”


而且
javascript:
在onClick中不是必需的，只有在href中才是必需的（在大多数情况下，这不是执行javascript的推荐方式）
好吧，我并不认为代码中有什么问题。
到底是什么问题？
两个div最初都显示了吗？
如果是这样，只需将内联样式添加到#top元素中，并使用“style='display:none'”（确保在启动时只显示一个样式…尽管您说这是从css设置的…）
我认为您的“onClick”必须小写：“onClick”。顺便说一句，您必须在代码中添加return false：


<a href="#" onclick="recent();return false;">Recent</a>



以下代码适用于firefox：


<html>
<head>
<script type="text/javascript">
   function recent() {
    document.getElementById('top').style.display = "none";
    document.getElementById('recent').style.display = "block";
   }
   function top() {
    document.getElementById('recent').style.display = "none";
    document.getElementById('top').style.display = "block";
   }
  </script>
</head>
<body>
 <div id="content">
   <div id="header"><a href="#" onclick="recent();return false;">Recent</a> | <a href="#" onclick="top();return false;">Top rated</a></div>
   <div id="top">
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="recent">
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>

</body>
</html>




函数最近（）{
document.getElementById（'top'）.style.display=“无”；
document.getElementById（'recent'）.style.display=“block”；
}
函数top（）{
document.getElementById（“最近”）.style.display=“无”；
document.getElementById（'top'）.style.display=“block”；
}
| 
最高学识的同工同酬，是一位杰出的献身者，他在劳动和就业方面有着临时的贡献。但在最低限度上，他在劳动和就业方面的实践证明，他是一名普通消费者的劳动和就业者。他是一名雇员，他是一名雇员，他是一名雇员，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人，他是一名工人不可轻视的圣徒，必须为动物的劳动负责

最近的研究表明，这是一位杰出的研究人员，他在工作和工作中临时参与了研究。但是，在研究过程中，他在实验室里进行了大量的实验，并在公共消费品上进行了验证。在欧盟自由区的自由区，两人或两人之间进行了重复研究。Exc这是一个不可轻视的人，必须为自己的劳动付出代价


在做了一点测试之后，我了解到“top”的作用就像一个保留字。虽然我似乎找不到任何关于此的一致文档，但将“top”函数的名称更改为“show_top”，解决了这个问题

在Mozilla Firefox 5.0、IE9、Opera 11.50和Chromium（谷歌Chrome）12.0.742.112中测试

注意，即使没有这种修改，它也可以在Mozilla Firefox和Chromium中工作

更新：仍然不能很好地替代文档，但我发现有一页解释了“top”：

更新#2:Eureka！这一个真的让我很烦，所以我找到了文档

从

可以直接访问当前窗口的成员，而无需
使用窗口对象作为前缀（例如，您可以改用文档
此外，全局变量和对象是
也可通过窗口对象访问（var x=2；警报
（window.x）；）


IDK，我在那里也不工作。我在用opera。这会是问题吗？我要尝试其他东西。我准备好了（刚才还有两位ppl警告过我），但还是没发生什么事。我的天啊，它工作了！真是太痛苦了……没人跟我提起过这件事……多谢了，老兄！你真的帮我省去了很多麻烦……：）

<html>
<head>
<script type="text/javascript">
   function recent() {
    document.getElementById('top').style.display = "none";
    document.getElementById('recent').style.display = "block";
   }
   function top() {
    document.getElementById('recent').style.display = "none";
    document.getElementById('top').style.display = "block";
   }
  </script>
</head>
<body>
 <div id="content">
   <div id="header"><a href="#" onclick="recent();return false;">Recent</a> | <a href="#" onclick="top();return false;">Top rated</a></div>
   <div id="top">
    <p>TOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
   <div id="recent">
    <p>RECENT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>

</body>
</html>