Question

我想隐藏＆amp;单击标签时显示div标签。假设我有一个标签 -

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

我还有另一个div

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

当我点击More link时，它应显示我的div toggle＆amp;应该改变More to Less＆amp;当我点击Less它应该hide my div toggle＆amp;再次text of <a> should be "More"。并且假设我在同一页面上有其他网页链接。然后，如果我重定向到其他页面＆amp;回到上一页然后它应该保持标签的先前状态以及div切换。如果我的页面包含任何将调用服务器端事件的按钮，那么在事件执行之后它应该保持与之前相同的状态。

怎么做？

感谢

Answer 1

如果您希望浏览器“记住”“切换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);
        }
    });

})

祝你好运

Answer 2

对于使用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>

这会使页面网址看起来像http://mysite.com/webpage.aspx#More

然后，当页面加载时，您可以使用更多的javascript来查看页面哈希并根据需要将div设置为可见/不可见。

但这对于更复杂的页面不起作用。

另外，请记住在使用asp.net和javascript时 - asp.net服务器将更改具有runat=server属性的元素的ID属性。这使得javascript与runat=server元素一起使用变得困难。您可以通过为runat=server元素提供ClientIdMode="Static"属性来解决此问题。

Answer 3

向toggle div添加css显示属性，并在div $('.target').toggle();的click eventhandler上使用Change。您还可以将Change的innerhtml从More更改为使用.html()

更少或从更少到更多

还要保持状态使用隐藏字段。

如果要使用toggle，请确保将ref添加到jquery库。

如何保持切换div标签的状态？

3 个答案: