使用jQuery，如何在調整大小后使元素保持焦點？

Question

我正在嘗試以640px和320px復制mashable.com的第二個菜單。 當調用resize時我遇到麻煩，因為當菜單項元素從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>

我嘗試了一個星期，使640像素到320像素看起來不錯。 我認為偽代碼是這樣的：頁面首次加載時將其焦點放在.date-nav-1上，而旋轉時則將焦點始終放在當前元素上，無論它是.date-nav-1還是.date-nav-3 every-每當我添加一個調整大小的功能，它失去焦點:(

現在幫助我前進的幫助真是太棒了:)

Answer 1

也許：

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

PS：為什么要重新加載頁面？ 我不建議這樣做。