使用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：为什么要重新加载页面？ 我不建议这样做。