Question

我有一个页面有多个div和一个javascript切换到位，当你点击链接时交换可见的div，但我想在页面加载时看到第一个div（myDiv1在代码中）下文）。

Javascript：

<script type="text/javascript">
document.load = function(){
    document.getElementById('myDiv1').style.display = 'block';
};
var currentActiveDiv;
toggleDiv = function(id){
    var domElement = document.getElementById(id);
    if (currentActiveDiv){
        var elementToHide = document.getElementById(currentActiveDiv);
        elementToHide.style.display = 'none';
    }
    domElement.style.display = 'block';
    currentActiveDiv = id;
};
</script>

HTML here：

<h3><a href="#" id="first option" onclick="toggleDiv('myDiv1');" class="homeheader">Div1</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv2');" class="homeheader">Div2</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv3');" class="homeheader">Div3</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv4');" class="homeheader">Div4</a></h3>
</td>
<td width="50">
&nbsp;
</td>
<td width="500">
<br>
<br>
<div id="myDiv1" style="display:none;">
    <p class=textwhheader>
        Div 1 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='mecplans.html' title="Click here to learn more.">
    Learn More </a>
</div>
<div id="myDiv2" style="display:none;">
    <p class=textwhheader>
        Div 2 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='minimumplans.html' title="Click here to learn more.">
    Learn More </a>
</div>
<div id="myDiv3" style="display:none;">
    <p class=textwhheader>
        Div 3 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='fixedindemnity.html' title="Click here to learn more.">
    Learn More </a>
</div>
<div id="myDiv4" style="display:none;">
    <p class=textwhheader>
        Div 4 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='specialty.html' title="Click here to learn more.">
    Learn More </a>
</div>

我之前看到一个问题发布在这里，有人希望相反（他们在加载页面时显示div并且不想要那个），但他们没有多个div而我无法收集很多。

Answer 1

您可以将CSS中的初始可见性设置为visibility: visible，然后使用您的javascript进行相应修改。

或者，您可以在CSS3中将所有内容设置为visible: hidden，然后在脚本中使用window.onload=myfunction;或在HTML中使用<body onload=myfunction()>进行更改。在您的函数内部，您可以调用将相应的div设置为可见的document.getElementById('myDiv').style.visible='visible';

Answer 2

如果您只是将document.load更改为window.onload，那么您的代码几乎可以正常工作。您还需要设置当前活动div：

currentActiveDiv = 'myDiv1'

在onload函数中。

你也可以选择在onload函数中调用toggleDiv（'myDiv1'）。

这是一个jsfiddle：

http://jsfiddle.net/qabw9kdt/1/

Javascript切换w /多个div，第一个div最初可见

2 个答案: