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

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 这里：

<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，但他们不想要那个），但他们没有多个 divs，我无法从中收集到太多信息。

Answer 1

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

或者，您可以在 CSS3 中将所有内容设置为 visible: hidden，然后在您的脚本中使用 window.onload=myfunction; 或在您的 [=21= 中使用 <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 切换多个 divs，第一个 div 最初可见

Javascript toggle w/ multiple divs, first div initially visible

javascript

html

css

toggle

visibility