刷新時加載所有Jquery Tab的內容

Question

我正在使用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>

Answer 1

應用CSS隱藏內容。

發生的情況是，直到整個dom ready ，腳本才會啟動，因此您會收到“未樣式化內容的內容”。

一個簡單的css修復：

.forum_inner_container > div{
    display:none
}

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

如果在其他沒有標簽的頁面上使用相同的class forum_inner_container類，則只需為每個標簽內容元素提供一個通用類，並據此調整上面的規則

刷新時加載所有Jquery Tab的內容

問題描述

1 個解決方案

解決方案1
1 已采納 2015-09-16 12:20:56

刷新時加載所有Jquery Tab的內容

問題描述

1 個解決方案

解決方案1 1 已采納 2015-09-16 12:20:56

解決方案1
1 已采納 2015-09-16 12:20:56