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

Question

I'm trying to copy mashable.com's second menu in 640px & 320px. I'm having trouble when resize is called as the menu item element becomes no longer in focus anymore when rotating from 640px to 320px. Can you help me please?

Here is current code, I've taken out the resize function for the moment until I can get it sorted.

<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>

I been trying for a week to get 640px to 320px to look good. I think pseudo code goes like this: when the page first loads have it focus .date-nav-1, when rotating keep the focus on that current element whether it be .date-nav-1 or .date-nav-3 every-time I add a resize function it looses focus :(

And help to get me going would be so awesome right now :)

Answer 1

Maybe:

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

PS: why reload the page? I don't recommend this.