0

jQuery を使用して、ページ内のセクションを表示および非表示にしています。このアプローチは Chrome、FF、および Safari で機能しますが、IE8 および 7 では機能しません。アニメーション、フェード、および不透明度を使用してみました。IE では何も動作しないようです。IE Developer Tools の js コンソールによると、選択した要素には「active」のクラスがありますが、Dev Tools の html ウィンドウで dom ツリーを見ると、active のクラスは削除または DOM に書き換えられていません。

マークアップ

<nav> 
<ul>
<li id="foo">Show Section 1</li>
<li id="bar">Show Section 2</li>
</ul>
</nav>

<div id="items">
<section class="foo">Content Section 1</section>
<section class="bar">Content Section 2</section>
</div>

CSS

#items > section {display: none;}
.active {display: block;}

JS

$('nav li').click(function(){
    var $me = $(this);
showSection($me.attr('id'));
});

showSection function(whichSection){
    $('#items > section').removeClass('active');    
    $('#items > '+'.'+whichSection).addClass('active');
}

どんなアドバイスでも大歓迎です。私は厄介な期限を迎えています。乾杯。

4

3 に答える 3

2

ID とクラスが混同されています。

$('nav li').click(function(){
    var $me = $(this);
    showSection($me.attr('id'));
});

showSection function(whichSection){
    $('#items > section').removeClass('active');    
    $('#items > #' + whichSection).addClass('active');
}
于 2012-05-07T18:35:34.940 に答える
1

関数宣言が間違っていました:

  function showSection (whichSection){
      $('#items > section').removeClass('active');    
      $('#items > #' + whichSection).addClass('active');
  }

または

   var showSection = function(whichSection){
        $('#items > section').removeClass('active');    
        $('#items > #' + whichSection).addClass('active');
    }

注: IE は section. したがって、 html5shiv / Modernizrを使用できます。 HTML5タグを見つけるために。

于 2012-05-07T18:36:35.893 に答える
0

IE8以下はsection強制的にタグを認識させないと認識しませんので、 html5shivjsライブラリを利用できます。

http://code.google.com/p/html5shiv

于 2012-05-07T18:36:22.070 に答える