所有Jquery选项卡的内容在刷新时加载一秒钟

Content of all Jquery Tabs loading for a second on refresh

本文关键字：刷新 加载 一秒钟 Jquery 选项 所有      更新时间：2023-09-26

我使用Jquery标签，一切工作正常，除了在网站上刷新所有标签的内容显示一秒钟，然后一切都跳回正常。https://gyazo.com/3df254e9161955c2d3d1cc116f660abf

到底是什么问题?我就是认不出来。

下面是我的代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../mechanics/segments_container.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            $("#tabs").tabs({
                activate: function(event, ui) {
                    window.location.hash = ui.newPanel.attr('id');
                }
            });
        });
    </script>
</head>
<body>
    <div id="tabs">
        <div class ="forum_switch_buttons_wrap">
          <ul style = "display:inline;">
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#General">General</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Gaming">Gaming</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Computing">Computing</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Graphics">Graphics</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Coding">Coding</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Market">Market</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Groups">Groups</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Premium">Premium</a></li>
            <li style = "list-style-type: none;"><a class = "forum_switch_buttons" href="#Archive">Archive</a></li>
          </ul>
        </div>
        <div class = "forum_wrap">
            <div class = "forum_change_height_left">
                <div class = "forum_container_left" style = "display:block;" >
                    <div class = "titlebar">
                        Forum
                    </div>
                    <div class = "forum_inner_container">
                        <div id="General">
                            General Content
                        </div>
                        <div id="Gaming">
                            Gaming Content
                        </div>
                        <div id="Computing">
                            Computing Content
                        </div>
                        <div id="Graphics">
                            Graphic Content
                        </div>
                        <div id="Coding">
                            Coding Content
                        </div>
                        <div id="Market">
                            Market Content
                        </div>
                        <div id="Groups">
                            Group Content
                        </div>
                        <div id="Premium">
                            Premium Content
                        </div>
                        <div id="Archive">
                            Archive Content
                        </div>
                    </div>
                </div>
            </div>
            <div class = "forum_change_height_right">
                <div class = "forum_container_right">
                    <div class = "titlebar">
                        Latest Posts
                    </div>
                    <div class = "forum_inner_container">
                        testtest
                    </div>
                </div>
            </div>  
        </div>
    </div>
</body>
</html>

应用css隐藏内容。

发生的事情是，脚本不会触发，直到整个dom是ready，所以你得到一个"Flash of Unstyled Content"

一个简单的css修复:

.forum_inner_container > div{
    display:none
}
.forum_inner_container > div:first-child{
    display:block
}

如果在其他没有制表符的页面上使用相同的类forum_inner_container，只需给每个制表符内容元素一个共同的类并相应地调整上面的规则

相关文章：