Question

如何在显示“显示信息”的链接上展开隐藏的页面加载div，但是当单击链接并且信息显示时，链接文本将更改为“隐藏信息”，然后该框将关闭点击“隐藏信息”链接时打开的方式相反？

感谢。

Answer 1

你可以很容易地做到这一点：

$("#infoToggler").click(function()
{
    if($(this).html() == "Show info")
    {
        $(this).html("Hide info");
        $("#infoBox").show();
    }
    else
    {
        $(this).html("Show info");
        $("#infoBox").hide();
    }
});

这是一个jsfiddle示例：http://jsfiddle.net/aFzG9/

Answer 2

“最简单”的方法是使用jQuery并使用.show()和.hide()方法。

要更新链接文字，只需使用

之类的内容即可

$("#linkId").text('Hide Info');

Answer 3

<a href="#" id="ShowHideInfo">Show Info</a>
<div id="Info" style="display:none">info</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#ShowHideInfo").click(function(){
        $("#Info").toggle(function(){
            $("#ShowHideInfo").text($(this).is(":visible")?"Hide Info":"Show Info");
        });
    });
});
</script>

Answer 4

您可以尝试这个示例，您可以轻松地运行和调整以满足您的需求。您需要自己下载jquery文件。

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

  $(document).ready(function(){


  $("#bttn").click(function() {

   var str = $("#bttn").text();

    if(str == "Show Info")
    {   
     $("#content").show();
     $("#bttn").text("Hide Info");

     }

     else {

     $("#content").hide();
     $("#bttn").text("Show Info");
     }
  });

  });




</script>
</head>

<body>

<div id="content" style="display:none;width:200px;height:100px;border:1px solid gray;padding:2px"> I am a nice little div.</div>

<a href="#" id="bttn">Show Info</a>

</body>

</html>

如何打开div然后使用更改的文本按钮再次关闭它

4 个答案: