如何阻止两个div在首次加载时跳过我的网页?

时间:2015-08-06 16:29:08

标签: javascript html css loading

感谢您的帮助!我最初加载页面时遇到以下代码问题。 div类'突出显示',其中包含div' box'和' box-2',在加载时跳转到页面。我怀疑是与在div上运行javascript的社交媒体按钮有关,但无法弄清楚如何让一切保持不动。这是site的链接。谢谢大家的帮助!!

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

1 个答案:

答案 0 :(得分:0)

如果您对使用javascript感到满意,可以使用display: hidden隐藏容器框,然后在javascript onload函数中将显示设置回block

股利:

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

的onload:

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