アクセや動的なアニメーション情報ボックス

Question

私はexampleで開始し、それを作るためにコードを追加しました：

• ダイナミック高さ
• でJSを使用してアクセス私が行っている

オフこれは正しい？これはほとんどのブラウザで動作しますか？

オリジナル：バージョンvisable hereの作業

$('#example-links a').hover(function(){ 
    var index = $("#example-links a").index(this); 
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border 
}); 

マイ変更されたコードを、それだけで上記に比べて少し長いようだ：

var maxHeight = 0, container_maxHeight = 0; 
var example_content = $("#example-content"); 
var example_div = example_content.children("div"); 

example_div.each(function() { 
    if($(this).height() > maxHeight) { 
     maxHeight = $(this).height(); 
     container_maxHeight = $(this).outerHeight(true); 
    } 
}); 
example_div.height(maxHeight); 

$("#example-content-container").css({ 
    "overflow":"hidden", 
    "height": container_maxHeight+"px" 
}); 

$('#example-links a').bind('click mouseover', function(e){ 
    var index = $("#example-links a").removeClass("active").index(this); 
    $(this).addClass("active"); 
    example_content.stop().animate({"marginTop" : -index*container_maxHeight + "px"}); 
    e.preventDefault(); 
}); 

私は両方のクリックを結合して、私はそれがマウスオーバーで動作するようにしたいが、私はまた、マウスを持っていない携帯電話でブラウジングするときにそれを動作させたいと思っている。

Answer 1

JSがオフになっている場合は、セクションIDだけが表示されます。あなたはcheck it hereすることができます。

各セクションについて、ラップするdivにIDを追加して、サイドリンクでそのIDにリンクします。

私はもう少しあなたのコードをクリーンアップします：

(function($){ 
    $(document).ready(function(){ 
     var maxHeight = 0, container_maxHeight = 0, 
      example_content = $("#example-content"), 
      example_div = example_content.children("div"); 

     example_div.each(function() { 
      var $section = $(this); 
      if($section.height() > maxHeight) { 
       maxHeight = $section.height(); 
       container_maxHeight = $section.outerHeight(true); 
      } 
     }); 
     example_div.height(maxHeight); 

     $("#example-content-container").height(container_maxHeight);   

     var $tabs = $('#example-links a'); 
     $tabs.bind('click mouseover', function(e){ 
      var index = $tabs.removeClass("active").index(this); 
      $(this).addClass("active"); 
      example_content.stop().animate({"marginTop" : -index*container_maxHeight + "px"}); 
      e.preventDefault(); 
     });        
    }); 
})(jQuery);