如何獲得特定的jQuery切換顯示/隱藏div加載可見？

Question

我正在使用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加載可見內容，並顯示正確的切換文本（“隱藏存檔”）。 有任何想法嗎？

Answer 1

如果要使用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>

Answer 2

更改內聯腳本：

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

Answer 3

首先，如果要使其中一個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才能正確切換它們。

$(function() {
    $(".toggleDiv").click(function () {
        $("div:first-child", this).toggle();
    });
});

那應該為您工作。 當然，不要忘記包括jQuery庫本身。 最簡單的方法是使用Google API鏈接。

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

Answer 4

如果使用jQuery，這會更容易，但是我認為只需設置正確的默認html就可以實現您的目標。

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