带有多个 div 的 Javascript 切换，第一个 div 最初可见答案

【问题标题】：Javascript toggle w/ multiple divs, first div initially visible带有多个 div 的 Javascript 切换，第一个 div 最初可见
【发布时间】：2015-05-28 08:44:43
【问题描述】：

我有一个包含多个 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：

<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，我无法收集很多。

【问题讨论】：

第一注，ID必须是唯一的。
看看stackoverflow.com/questions/29240821/…

标签： javascript html css toggle visibility

【解决方案1】：

如果您只是将document.load 更改为window.onload，您的代码几乎可以按原样运行。您还需要设置当前活动的 div：

currentActiveDiv = 'myDiv1'

在onload函数中。

您也可以选择在 onload 函数中调用 toggleDiv('myDiv1')。

这是一个 jsfiddle：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：