移动改变结果:为什么?

问题描述 投票:-3回答:1

这是代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div style="text-align: justify">[Introduction text]</div> <br> <br> 
<ul class="nav nav-tabs"> 
    <li class="active">
        <a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a>
    </li> 
    <li>
        <a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a>
    </li> 
</ul> 
<div id="Vspoiler" class="tab-pane tabcontent active"><br> 
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px"> [Contents of col 1 of tab 1] </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px"> [Contents of col 2 of tab 2] </div>
                </td>
            </tr>
        </tbody>
    </table>
</div> 
<div id="Cspoiler" class="tab-pane tabcontent"><br> 
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px"> [Contents of col 1 of tab 2] </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px"> [Contents of col 2 of tab 2] </div>
                </td>
            </tr>
        </tbody>
    </table>
</div> 
<script> 

    function openPage(pageName) { 
        var i, tabcontent; 
        tabcontent = document.getElementsByClassName("tabcontent"); 
        for (i = 0; i < tabcontent.length; i++) { 
            tabcontent[i].style.display = "none"; 
        } 

        document.getElementById(pageName).style.display = "block"; 
    }

    document.getElementById("defaultOpen").click(); 

</script>

在上面的代码中,最后有一个元素。如果它留在那里,输出是所希望的。如果移动到顶部,则输出会发生变化,因为加载时会显示所有tabcontents窗格的内容(或任何称为它们的最佳术语),并且只有在单击非活动选项卡时才会显示其他窗格的内容(在这种情况下1,但如果总共超过2,则任何其他)消失。为什么会这样?

注意:这是对此的跟进,代码主要由@Bradley在那里回答。

html css twitter-bootstrap
1个回答
0
投票

这是因为在script之前运行的documentready。 ( 同步 )。如果你想把你的script保持在body的开头,或者在头部,请使用de window.onload函数。

window.onload = function()
{ 
 // your code goes here
}

我的建议是将script放在正文的末尾,也就是bootstrapjquery库,因为这些脚本将在DOM准备好后被触发。

© www.soinside.com 2019 - 2024. All rights reserved.