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

我使用jQuery來隱藏/顯示頁面上的內容部分。在一頁上，我有兩個這樣的部分。現在該頁面加載隱藏。我需要頁面加載第一個div可見，第二個隱藏。如何獲得特定的jQuery切換顯示/隱藏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"; 
    } 

}

和HTML設立的DIV和他們的肘杆：我試圖改變風格=

<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：visible」，雖然它確實會導致頁面加載可見內容，但切換鏈接仍顯示「click to open」文本（在本例中爲「2012年時事通訊檔案」）。

我需要第一個div加載可見和正確的切換文本（隱藏檔案）才能顯示。有任何想法嗎？

來源

2012-07-23 Cynthia

這裏有**零** jQuery。 – 2012-07-23 20:55:28

您正在顯示單擊鏈接時的代碼，但是在加載頁面時您希望使其中一個div可見並更改鏈接文本的代碼是什麼？ – MrOBrian 2012-07-23 21:00:10

你可以在這裏看到它的行動：http://s13.mynewsitereview.com/newsletters/ 目前所有div加載隱藏。我需要第一個div（也只有第一個div）加載可見。 – Cynthia 2012-07-23 21:03:38

這很容易，如果你使用jQuery，但我認爲只是設置正確的默認html應該實現你的目標。

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

來源

2012-07-23 21:11:05

這正是我需要的！非常感謝你:) – Cynthia 2012-07-23 21:13:11

不客氣。簡單地在頁面上鍊接jquery，並不意味着你在使用它。閱讀文檔並通過一些教程運行，你會想知道你如何在沒有它的情況下生活。 http://jquery.com/ – 2012-07-23 21:15:59

更改內嵌腳本：

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

來源

2012-07-23 21:00:08 Sam3k

確實使div加載可見，但是切換鏈接仍顯示爲div隱藏。 – Cynthia 2012-07-23 21:06:25

首先，如果你想的div的一個是可見的，只是不指定顯示屬性。它們默認是可見的。儘管你用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>

來源

2012-07-23 21:06:30

如果你想使用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();   
});

像這樣

<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>

的HTML

來源

2012-07-23 21:13:31

+1更實用的jQuery實現方案。 – 2012-07-23 21:18:20

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

回答

相關問題