jqueryを使ってリサイズ後にどのように要素のフォーカスを維持しますか？

Question

mashable.comの2番目のメニューを640px & 320pxにコピーしようとしています。 640pxから320pxへの回転時に、メニュー項目の要素がもう焦点に達しなくなったため、サイズ変更が呼び出されたときに問題が発生します。私を助けてくれますか？

ここでは現在のコードですが、ソートされるまで、resize関数を取り出しています。

<script> 
     jQuery(document).ready(function(){ 
      var sliderWidth = jQuery('.mosts').css('width'); 
      swidthnum = sliderWidth.replace("px", ""); 

      if (swidthnum >= 640) { 
       jQuery('#slider').css('width', '150%'); 
       jQuery(".buttongroup1>.date-nav-1").click(function(){ 
        jQuery("#slider").animate({left: "0px"}); 
       }); 
       jQuery(".buttongroup1>.date-nav-3").click(function(){ 
        jQuery("#slider").animate({left: "-50%"}); 
       }); 
      } 
      else if (swidthnum >= 320) { 
       jQuery('#slider').css('width', '300%'); 
       jQuery(".buttongroup2>.date-nav-1").click(function(){ 
        jQuery("#slider").animate({left: "0px"}); 
       }); 
       jQuery(".buttongroup2>.date-nav-2").click(function(){ 
        jQuery("#slider").animate({left: "-100%"}); 
       }); 
       jQuery(".buttongroup2>.date-nav-3").click(function(){ 
        jQuery("#slider").animate({left: "-200%"}); 
       }); 
      } 

      jQuery(window).resize(function(){location.reload();}); 
     });    
</script> 
<div class="buttongroup1"> 
     <button class="date-nav-1">WHAT'S TRENDING</button> 
     <button class="date-nav-3">READ MORE</button> 
    </div> 
    <div class="buttongroup2"> 
     <button class="date-nav-1">TRENDING</button> 
     <button class="date-nav-2">NEWEST</button> 
     <button class="date-nav-3">READ MORE</button> 
    </div> 

640pxから320pxに見えるように1週間努力しています。私は擬似コードが次のようになると思います：ページが最初に読み込まれたときに.date-nav-1または.date-nav-3のいずれであっても、その現在の要素にフォーカスを置いているときに.date-nav-1にフォーカスを持ちます。 私はそれが失っサイズ変更機能を追加し、すべての時間が:(

を集中し、私は今とても素晴らしいだろう:)たぶん

Answer 1

軌道に乗るのに役立つ：

$(window).resize(function(){$("#my-element").focus();}); 

PS：なぜページをリロード？私はこれをお勧めしません。