如何維護切換的div標籤的狀態？

我想隱藏&單擊標籤時顯示div標籤。假設我有AS-如何維護切換的div標籤的狀態？

<div id="Change"><a href="#">More</a></div>

標籤和我還有一個DIV作爲

<div id="toggle">some controls</div>

當我在More link點擊，那麼它應該顯示我的div toggle &應該改變More to Less &當我在點擊它應該hide my div toggle &再text of <a> should be "More"。並假設我在同一頁面上有其他網頁鏈接。然後，如果我重定向到其他頁面&回到上一頁，那麼它應該保持標籤以前的狀態以及div切換。如果我的頁面包含任何將調用服務器端事件的按鈕，那麼在事件執行後，它應該保持與之前相同的狀態。

如何做到這一點？

感謝

來源

2011-11-21 Priyanka

對於JavaScript的一個快速解決方案，你可以改變頁面的哈希：

<div id="Change"><a href="#" id="toggleButton" onclick="toggleButton();">More</a></div> 

<script> 
function toggleButton() { 
    if (document.getElementById("toggleButton").innerHTML === "More"){ 
     document.getElementById("toggleButton").innerHTML = "Less"; 
     window.location.hash = "Less"; 
    } 
    else { 
     document.getElementById("toggleButton").innerHTML = "More"; 
     window.location.hash = "More"; 
    } 
} 
</script>

這將使頁面的URL看起來像http://mysite.com/webpage.aspx#More

然後，當頁面被加載，你可以使用更多的JavaScript來查看頁面散列，並根據需要設置div可見/不可見。

雖然這不適用於更復雜的頁面。

另外，請記住，當使用asp.net和javascript - asp.net服務器將更改具有runat=server屬性的元素的ID屬性。這使得使用javascript與runat=server元素很難。您可以通過給予runat=server元素以及ClientIdMode="Static"屬性來解決此問題。

來源

2011-11-21 13:08:58 Oliver

的innerText用於IE和用於的textContent FF /鉻會產生更好的結果，如條件檢查用的innerHTML可導致無端html標籤存在。 –

一個CSS顯示屬性添加到toggle DIV和DIV Change的點擊事件處理程序使用$('.target').toggle();。你還可以從更多使用.html()

還保持改變Change的innerHTML少或由少到多該州使用隱藏字段。

如果您想使用toggle，請確保您將ref添加到jquery庫。

來源

2011-11-21 13:12:59

如果您希望瀏覽器「記住」「切換div」狀態，請使用cookie。使用jquery和jquery cookie插件使您的代碼更輕鬆，更短。

這裏有一個你可以做的例子。

// on document ready 
$(function(){ 

    // read the cookie and make a decision 
    var toggle = $.cookie('toggle'); 
    if(toggle && toggle == "toggle"){ 
     $('div#toggle').animate({height:300},500); 
     $(this).text("Less"); 
    } 

    $('div#change>a').click(function(){ 
     if($(this).text() == "More"){ 
      //if More then toggle the toggle div. 
      $('div#toggle').animate({height:300},500); 
      $(this).text("Less"); 
      $.cookie('toggle','toggle'); 
     }else{ 
      $('div#toggle').animate({height:0},500); 
      $(this).text("More"); 
      $.cookie('toggle',NULL); 
     } 
    }); 

})

好運

來源

2011-11-21 13:19:07 UnLoCo

如何維護切換的div標籤的狀態？

回答

相關問題