如何在jQuery中切换 [英] How to Toggle in jQuery

问题描述

我想单击一个按钮(或在下面的示例中为链接)，然后在2个内容块之间切换，从本质上讲，从显示内容到编辑内容.

I want to click a button (or in my example below, a link) and toggle between 2 blocks of content to essentially go from displaying content to editing content.

我有以下代码片段:

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

感谢您的帮助.

[请参见如何精简和压缩重复的jQuery代码扩展到此技术)

[see How to Streamline and Compress Repetitive jQuery Code for expansion to this techique]

推荐答案

使用jQuery很简单，只需添加以下JS代码:

It is easy with jQuery just add the following JS code:

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

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

And it will work with your current markup and css code.

这篇关于如何在jQuery中切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！