javascript - 单击事件上的交替按钮？

Question

嘿，这都是关于 Jquery 的。我使用两个 div 和一个按钮，一次只显示一个 div。假设这些是 div：

<div id="first"></div>
<div id="second"></div>

按钮是：

<input type="button" value="show first" onClick="called a javascript();"/>

仅显示单个 div，即first

<script>
    $(document).ready( function() {
        $("#second").hide();
    });
</script>

现在单击按钮时，我想隐藏第一个 div，显示第二个，并且value按钮更改为显示第二个，如果再次单击它会恢复到以前的状态。

提前致谢

Answer 1

这是小提琴。希望能帮助到你。

html

<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />

脚本

$('#btn').on('click', function () {
    var $this = $(this);
    if ($this.val() === 'show first') {
        $('#first').show();
        $('#second').hide();
        $this.val('show second');
    } else {
        $('#first').hide();
        $('#second').show();
        $this.val('show first');
    }
});

Answer 2

您正在寻找的是来自 jquery的切换功能

这是小提琴的一个例子

$(".toggleMe").click(function() {
   $(".toggleMe").toggle(); 
});