首次加載時，如何防止兩個div在網頁上跳轉？

Question

感謝您的幫助！ 頁面最初加載時，以下代碼出現問題。 包含div'box'和'box-2'的div類'highlights'在加載時會在頁面中跳轉。 我懷疑這與在divs上方運行javascript的社交媒體按鈕有關，但無法弄清楚如何使所有內容保持靜止。 這是該站點的鏈接。 謝謝大家的幫助！

<div class="buttons">

    <div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB-                          power-rankings/week-18.html" data-layout="button_count">
    </div>

    <div class="twitter-button"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)                                                       [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))                                       {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
     </div>

    <div class="g-plus" data-action="share" data-annotation="bubble" data-                                            href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html">             </div>    

</div>        

<div class="highlights">    
        <div class="box">
            <div class="box-header"><p>What to Watch</p></div>
                <div class="box-content">
                    <div class="game-details">
                    </div>
                    <div class="game-overview">
                        <div class="away-team">
                            <div class="away-team-logo">
                                <img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
                            </div>
                                <div class="record">
                                    <h6>Dodgers</h6>
                                    <h6 class="lighter">(60-45)</h6>
                                </div>    
                        </div>
                        <div class="home-team">
                            <div class="home-team-logo">
                                <img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
                            </div>
                            <div class="record">
                                <h6>Pirates</h6>
                                <h6 class="lighter">(61-43)</h6>
                            </div> 
                        </div>
                        <div class="symbol">@</div>
                    </div>

                </div>
                        <div class="date"> 
                            <h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
                        </div>    
        </div>

        <div class="box2">
            <div class="box2-header"><p>Biggest Movers</p></div>
                <div class="rise">   
                    <div class="rise-up"><img src=../../Images/arrowGW.gif></div>
                    <div class="rise-number"><p>5</p></div>
                    <div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>      
                </div>
                <div class="fall">
                    <div class="fall-down"><img src=../../Images/arrowRW.gif></div>
                    <div class="fall-number"><p>5</p></div>
                    <div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
                </div>    
        </div>
</div>

Answer 1

如果您可以使用javascript可以接受，則可以使用display: hidden容器框，然后在javascript onload函數中將顯示設置回block 。

分區：

<div id="highlightDiv" class="highlights" style="display: hidden">
    ...
</div>

負載：

window.onload = function() {
    document.getElementById("highlightDiv").style.display = "block";
}