Javascript 如何让特定的jquery切换show/hide div加载可见？

我正在使用jQuery隐藏/显示页面上的部分内容。在一页中，我有两个这样的部分。现在页面加载时两个都隐藏。我需要加载页面，第一个div可见，第二个div隐藏

以下是我的javascript：

function a2012() {
    var ele = document.getElementById("toggleArch12");
    var text = document.getElementById("displayArch12");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "2012 Newsletter Archive";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Archive";
    }

} 

function a2011() {
    var ele = document.getElementById("toggleArch11");
    var text = document.getElementById("displayArch11");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "2011 Newsletter Archive";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Archive";
    }

}

以及用于设置div及其切换链接的HTML：

<a id="displayArch12" href="javascript:a2012();">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="javascript:a2011();">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>

内容在这里
内容在这里

我尝试将第一个div的style=“display:none”更改为style=“display:visible”，虽然它确实会导致页面加载可见的内容，但切换链接仍然显示“单击打开”文本（在本例中为“2012新闻稿存档”）

---

我需要加载可见的第一个div，以及显示正确的切换文本（隐藏存档）。有什么想法吗？

更改内联脚本：

<div id="toggleArch12" style="display:block">content goes here</div>

内容在这里

首先，如果希望其中一个div可见，只需不指定display属性即可。默认情况下，它们是可见的。尽管使用div查找的值是display:block

我会使用div而不是链接来满足您的切换需求

<div id="displayArch12" class="toggleDiv">
    2012 Newsletter Archive
    <div id="toggleArch12" style="display:block;">Content Here</div>
</div>
<div id="displayArch11" class="toggleDiv">
    2011 Newsletter Archive
    <div id="toggleArch11" style="display:none;">Content Here</div>
</div>

那应该对你有用。当然，不要忘记包括jQuery库本身。最简单的方法是使用GoogleAPI链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

---

如果使用jQuery，这会更容易，但我认为只需设置正确的默认html即可实现目标

<a id="displayArch12" href="javascript:a2012();">Hide Archive</a>
<div id="toggleArch12" style="display:block">content goes here</div>

内容在这里

如果您想使用jQuery（您不是来自发布的代码），可以这样编写：

$("#displayArch11").click(function(e) {
    var $display = $(this)
    $display.next().toggle(function() {
         $display.html($display.html() == "2011 Newsletter Archive" ? "Hide Archive" : "2011 Newsletter Archive");
    });
    e.preventDefault();        
});
$("#displayArch12").click(function(e) {
    var $display = $(this)
    $display.next().toggle(function() {
         $display.html($display.html() == "2012 Newsletter Archive" ? "Hide Archive" : "2012 Newsletter Archive");
    });
    e.preventDefault();        
});

HTML是这样的

<a id="displayArch12" href="#">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="#">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>

内容在这里
内容在这里

这里没有jQuery。单击链接时，您会显示代码，但当页面加载时，您会有什么代码，希望使其中一个div可见并更改链接的文本？您可以在此处看到它的作用：当前所有div加载隐藏。我需要第一个div（并且只有第一个div）来加载visible。然后它还使用collapse.js文件（也可以通过view src访问），该文件确实使div加载可见，但切换链接仍然显示为div被隐藏。这正是我所需要的！非常感谢：）不客气。仅仅在页面上链接jquery并不意味着您正在使用它。阅读文档并浏览一些教程，你会想知道没有它你是如何生活的。

<a id="displayArch12" href="#">2012 Newsletter Archive</a>
<div id="toggleArch12" style="display:none">content goes here</div>

<a id="displayArch11" href="#">2011 Newsletter Archive</a>
<div id="toggleArch11" style="display:none">content goes here</div>