変更表示プロパティとid属性

Question

私は2つのセクションがあります。

を

<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;"> 
<!--stuff ---> 
</section> 

<section class="focus" id="need" style="display:none;"> 
<!--stuff ---> 
</section> 

私は窓が1043px未満の幅に対する低下した場合に、第2のセクションを表示したいです。 display:none

更新： 幅が1043未満の場合、最初のセクションのid属性を削除するにはどうすればよいですか？

Answer 1

CSSメディアクエリを使用する必要があります。あなたはここでそれについての詳細を読むことができます。たとえばhttp://www.w3schools.com/css/css_rwd_mediaqueries.asp

：

@media only screen and (max-width: 1043px) { 
    section.focus { 
     display: block; 
    } 
} 

Answer 2

は、まずあなたは、複数のdivに同じIDを使用することはできません。だから1つのdivのidを変更してください。 そして、第二のdivを隠し、最初のdiv表示する：

使用CSS：ID属性を除去するためのあなたの条件に応じて

@media only screen and (max-width: 1043px) { 
    .focus { 
    display: block; 
    } 
    .notes { 
    display: none; 
    } 
} 

Answer 3

を、次のJavaScriptを試してみてください。ただし、パフォーマンスに関心がある場合は、サイズ変更ハンドラのデバウンス/スロットルを調べることを検討する必要があります。 （http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/）

$(window).on('resize', function() { 
    if($(window).width() < 1043) { 
     $('.notes').removeAttr('id'); 
     $(window).off('resize'); 
    } 
}); 

しかし、メディアは、答えが画面幅に基づいて、表示/非表示を表示するための正しいアプローチされるクエリ。