Question

我想点击一个按钮（或者在下面的示例中，一个链接），并在两个内容块之间切换，基本上从显示内容到编辑内容。

我有以下代码片段：

<style type="text/css">
    div.show {display:block;}
    input.hide {display:none;}
</style>

<a href="#">edit</a> <!--not sure what my jquery should look like to do toggling-->
<div class="show" id="d-01-on">Some content</div>
<input class="hide" id="d-01-off" name="d-01" value="Some content" />

感谢您的帮助。

[请参阅How to Streamline and Compress Repetitive jQuery Code扩展到此技术]

Answer 1

使用jquery显示和隐藏元素的

按如下方式完成：

HTML：

<div id="d-01">content</div>

使用Javascript：

$.("#d-01").toggle(); //toggles display so if shown then hides, if hidden then shows;
$.("#d-01").show();  //shows div
$.("#d-01").hide();  //hides div

Answer 2

这将切换两个元素的可见性：

function handleClick() {
  $('div.show').toggle();
  $('input.hide').toggle();
}

那么你的班级名称当然是错的。您可以改用ID。

Answer 3

使用jQuery很容易添加以下JS代码：

$(document).ready(function(){
   $('#button').on('click', function() {
        $('#d-01-on').toggle();
        $('#d-01-off').toggle();
   });
})

它将与您当前的标记和CSS代码一起使用。

如何切换jQuery

3 个答案: