1 
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      $(".m").hide();
      $("#home").show();
    });

    function f(id) {
      $(".m").hide();
      $(id).show();
    }
  </script>
</head>

<body>
  <a href="#" onclick="f(home)"> HOME </a>
  <a href="#" onclick="f(home2)"> HOME2 </a>
  <a href="#" onclick="f(contact)">CONTACT</a>

  <div class="m" id="home">home</div>
  <div class="m" id="home2">home2</div>
  <div class="m" id="contact">contact</div>
</body>

在 firefox14 中：每当我单击第一个<a>时，它都不起作用，页面将为空白。但是除了第一个<a>（即除了家庭）之外的其他人都可以正常工作。

但在 IE8 中，它们都可以正常工作。

为什么？我的代码有什么问题？是我的问题吗？

  • 我想要某种菜单，另一页的来源（如联系人，关于我们）在一个页面中，但它们是隐藏的，通过单击它们，它们将可见。
4

3 回答 3

4

那是因为 Firefox 已经定义了函数window.home，所以它不会引用带有 . 的元素id="home"。该函数未在 IE 中定义，这就是它在那里工作的原因。

您不应该依赖元素成为基于其 id 的全局变量。使用选择器查找元素：

<a href="#" onclick="f($('#home'))"> HOME </a>
<a href="#" onclick="f($('#home2'))"> HOME2 </a>
<a href="#" onclick="f($('#contact'))"> CONTACT </a>

或者，将 id 的名称作为字符串发送到函数中：

<a href="#" onclick="f('home')"> HOME </a>
<a href="#" onclick="f('home2')"> HOME2 </a>
<a href="#" onclick="f('contact')"> CONTACT </a>

并使函数使用字符串而不是元素：

function f(id) {
    $(".m").hide();
    $('#' + id).show();
}
于 2012-09-01T22:51:38.567 回答
3

您的函数调用都是错误的，使用未定义的变量而不是字符串。

代替

<a href="#" onclick="f(home)"> HOME </a>

它应该是

<a href="#" onclick="f('#home')"> HOME </a>

这与浏览器类型和版本无关。

于 2012-09-01T22:53:35.357 回答
1

您还可以将标记更改为：

<a href="#home" class='anchors'> HOME </a>
<a href="#home2" class='anchors'> HOME2 </a>
<a href="#contact" class='anchors'> CONTACT </a>

而不是 HTML 内在属性使用 jQueryclick方法。

$('.anchors').click(function(e){
   e.preventDefault()
   $('.m').hide()
   $(this.href).show()
})
于 2012-09-01T22:52:41.283 回答