Question

我正在尝试这样的事情，但它似乎不起作用。

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>

HTML：

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

CSS：，

#top {display:none}

非常感谢任何帮助。

修改

我在firefox中尝试过，运行正常。新问题。为什么它在歌剧中不起作用？

Answer 1

工作演示：http://jsfiddle.net/hFUhA/

有些观点......

recent = function(){}是更好的函数构造，因为它允许您明确定义函数的范围

最好在点击事件上返回false以防止默认行为：onClick="top(); return false;"

和javascript:在onClick中不是必需的，仅在href中（并且在大多数情况下不建议执行javascript的方式）

Answer 2

尝试使用错误控制台。

错误是onClick处理程序中的“javascript：”部分。 onClick里面的一切都已经是javascript。

另外我建议使用jQuery，它允许你使用

这样的好语句

$('#recent').show();
$('#top').hide();

然而，从学习目的开始使用原始javascript并不是一个坏主意。

Answer 3

只要您已经在脚本中尽早定义了recent和top函数，那么它应该可以正常工作。

它是running fine on JSFiddle（但请检查左侧设置的值）。

Answer 4

javascript:是你的问题。这是onclick属性的错误语法。这是人们在将JavaScript放入href属性时习惯使用的。删除它，它应该工作。

Answer 5

好吧，我真的没有看到代码中的问题。究竟是什么问题？最初显示这两个div？如果是这样，只需将内联样式添加到#top元素，使用“style ='display：none'”（以确保在启动时只显示一个...尽管你说这是从css设置的。）

Answer 6

我认为你的“onClick”必须是小写的：“onclick”。顺便说一下，你必须在你的代码中添加return false：

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

Answer 7

以下代码适用于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>

Answer 8

经过一些测试后，我发现“顶部”就像一个保留字。虽然我似乎无法找到任何关于此的一致文档，但将“top”函数的名称更改为“show_top”，可以解决问题。

在Mozilla Firefox 5.0，IE9，Opera 11.50和Chromium（谷歌浏览器）12.0.742.112中进行了测试

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

更新：仍然是文档的不良替代品，但我发现一个页面提供了“顶部”的一些解释：http://www.dotnetspider.com/forum/179582-top-javascript.aspx

更新＃2：尤里卡！这个真的很烦我，所以我找到了文档......

来自Dottoro.com, window object:

当前窗口的成员可以直接访问，不需要使用窗口对象作为前缀（例如，您可以使用文档代替 of window.document），还有全局变量和对象也可以通过window对象访问（var x = 2; alert （window.x）;）

Dottoro.com, top property

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

8 个答案: