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 では、それらはすべて正常に動作します。

なんで？私のコードの問題は何ですか？それは私の問題ですか？

  • 他のページのソース（連絡先、私たちについてなど）が1つのページにあるようなメニューが必要ですが、それらは非表示になっており、クリックすると表示されます。
4

3 に答える 3

4

これは、Firefox が function を定義しているwindow.homeため、 で要素を参照しないためid="home"です。関数はIEで定義されていないため、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 に答える