Question

我的代码只是出于某种原因才在第一次加载时中断。我正在为左变量得到错误的值，这正在产生问题。一旦我点击其中一个标签，即使刷新也一切正常。现在，如果我清除缓存并从头开始运行同样的问题再次启动。

请有人帮我解决问题：

检查以下代码。

我尝试过加载事件。仍然没有工作

<section class="section product_category_landing">
    <div class="grid-container tabbed_nav_wrap">
        <div class="tabbed_nav grid-100">
            <a href="javascript:" id="tab_overview" rel="tab_1">Overview</a>
            <a href="javascript:" id="tab_video_creative_tools" rel="tab_2">Video Creative Tools</a>
            <a href="javascript:" id="tab_media_management" rel="tab_3">Media Management</a>
            <a href="javascript:" id="tab_storage_and_servers" rel="tab_4">Storage & Servers</a>
            <a href="javascript:" id="tab_support_and_services" rel="tab_5">Support & Services</a>
            <div class="nav_item_bg"></div>
        </div>
    </div>

    <div class="grid-container more-col-spacing">
        <div id="tab_1" class="tabbed_container">
            <div class="grid-100">
                <h2><a href="">Avid Motion Graphics</a></h2>
            </div>
        </div>
        <div id="tab_2" class="tabbed_container">
            <div class="grid-100">
                <h2><a href="">New Section Here</a></h2>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">         
    $(function(){
    // Tabbed Containers
    $('.tabbed_nav a').on('click', function(e) {
        console.log("clicked");
        var $container = $('.tabbed_container#' + $(e.target).attr('rel')),
                $hover = $('.nav_item_bg'),
                tab_name = e.target.id.replace('tab_', '');
                console.log(tab_name);

        $('.tabbed_container:visible').hide();
        $container.show();
        $('.tabbed_nav a.current').removeClass('current');
        $(e.target).addClass('current');

        document.location.replace('#' + tab_name);

        if($hover.is(':hidden')) {
            setTimeout(function() {
                $hover.show();
            }, 1);
        }
                    //alert("if this is uncommented it works.");
        var width = $(e.target).outerWidth(),
                left = $(e.target).position().left;//I am getting wrong left position on first load for some reason.

        $hover.css({
            width: width,
            left: left
        });

    });


    // Tabbed Nav Hash in URL
    var hash = document.location.hash.replace('#', '');

    setTimeout(function() {
        if(hash !== '') {
            hash = '#tab_' + hash;
            $(hash).click();
        } else {
            if($('.tabbed_nav').length > -1) {
                $('.tabbed_nav a:first').click();
            }
        }
    }, 150);
});
</script>

Answer 1

我强烈建议将代码放在一个页面加载后执行的函数中：

document.onload =afterPageLoad;
function afterPageLoad(){
    //put your code here
}

如果你没有异步元素，那么

或者这个：

$(function(){
    //put your code here

});

这样你就可以确保在进行尺寸和测量之前已经加载了所有元素

编辑：

我也看到你使用position().left，你确定你需要职位吗？因为position占据了相对于父元素的位置。

尝试使用.offset().left，看看是否有帮助

第一次加载时出错位置

1 个答案: