Home/ Questions/Q 8462245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:06:50+00:00

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

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

In firefox14: Whenever I click on the first <a> it doesn’t work and the page will be blank. But the others except the first <a>(i.e except home) work properly.

But in IE8, all of them work properly.

Why? What’s the problem with my code? Is it my problem?

  • I want to have some kind of menu that the source of the other page (like contact, about us) are in one page, but they are hidden and by clicking on them, they will be visible.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because Firefox has defined the function window.home, so it will not refer to the element with id="home". The function is not defined in IE, that’s why it’s working there.

    You shouldn’t rely on the elements becoming global variables based on their id. Use a selector to find the elements:

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

    Alternatively, send the name of the id as a string into the function:

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

    and make the function use the string instead of an element:

    function f(id) {
    $(".m").hide();
    $('#' + id).show();
}
    • 0