Javascript 按按钮显示div并隐藏另一个div

我有两个div。我需要两个按钮，每个按钮一个。显示第一个div，但隐藏第二个div。当我按下第二个div的按钮时，它将显示，第一个div将隐藏。同样，当我按下第一个div按钮时，第一个div将显示，第二个div将隐藏。我需要这两个按钮的html和js代码。请帮忙。：）

---

我认为上面的代码应该可以

让我们假设第一个按钮的id是'btn1'第二个按钮id是'btn2'第一个div id是'div1'，第二个div id是'div2'

   <script>
          $('#btn1').click(function(){
              $('#div2').show();
              $('#div1').hide();
          });

         $('#btn2').click(function(){
            $('#div2').hide();
            $('#div1').show();
         });
      </script>

$（'#btn1'）。单击（函数（）{
$（'#div2'）.show（）；
$（'#div1'）.hide（）；
});
$（'#btn2'）。单击（函数（）{
$（'#div2'）.hide（）；
$（'#div1'）.show（）；
});

1
2.
例1
例2
$（函数（）{
$（'#button1'）。在（'click'，function（）上{
$（'#div1'）.show（）；
$（'#div2'）.hide（）；
});
$（'#button2'）。在（'click'，function（）上{
$（'#div2'）.show（）；
$（'#div1'）.hide（）；
});
});

$（function（）{与$（document.ready）相同（function（）{用于文档准备就绪的时间）

on方法是关联到一个事件，在这种情况下是click事件

show（）和hide（）方法顾名思义就是显示或隐藏与被调用方法关联的元素

---

也许这会对你有所帮助

在第一个按钮上单击事件

document.getElementById('SecondDiveId').style.display='none';
document.getElementById('firstDiveId').style.display='block';

document.getElementById('FirstDiveId').style.display='none';
document.getElementById('SecondDiveId').style.display='block';

在第二个按钮上单击事件

document.getElementById('SecondDiveId').style.display='none';
document.getElementById('firstDiveId').style.display='block';

document.getElementById('FirstDiveId').style.display='none';
document.getElementById('SecondDiveId').style.display='block';

$（“按钮”）。单击（函数（）{
如果（this.id=='btn1'）{
$（'.div1'）.show（）；
$（'.div2'）.hide（）；
}否则{
$（'.div1'）.hide（）；
$（'.div2'）.show（）；
}
})

div{
宽度：200px；
高度：200px；
背景：矢车菊蓝；
线高：200px；
文本对齐：居中；
利润率：10px；
}
.1分部{
显示：块；
背景：深红色；
}
.第2分部{
显示：无；
}

第一组
第2组
节目组1
show Div 2

这是您所期望的吗

<div id="DivOne">Div One   
</div>
 <button id="hideshow1" class="btn btn-primary">click 1 </button>

<div id="DivTwo">Div Two    
</div>
<button id="hideshow2" class="btn btn-primary">click 2 </button>

---

试试这个，希望它能奏效

<div align="center" id = "idsample">
           ....
        </div>


$("#buttonid").click(function (event) {
   $(#idsample).hide();
};

....
$（“#按钮ID”）。单击（函数（事件）{
$（#idsample）.hide（）；
};

你可以用一个按钮来切换div。但是，我不知道你的要求的上下文，所以给你…一个小提琴

$('.btn-one').on('click', function(){
    $('.one').show();
    $('.two').hide();
});

$('.btn-two').on('click', function(){
    $('.two').show();
    $('.one').hide();
});

---

链接使用以下简单的javascript代码：

html分区：

<div id="showInput" style="overflow-x: auto; display: none;">
    //yourdata
</div>
<input class="abc" onclick="showInput()" type="button" value="abc" />

---

你尝试了什么等等。我们在这里帮助修改和修复你的代码，而不是为你提供功能。你有jquery的.hide（）和.show（）来做这件事，我找不到精确的JSFIDLE答案。我只需要一个简单的按钮显示开关。只需创建按钮并添加一个点击事件，例如$（'button#yourbuttonnid'）。on（'click'，function（）{$（'button#yourButtonId2'）.show（）}）如果你想更改你认为正确的答案，至少要放弃投票。

<div id="showInput" style="overflow-x: auto; display: none;">
    //yourdata
</div>
<input class="abc" onclick="showInput()" type="button" value="abc" />

function showInput(){
    document.getElementById('showInput').style.display='block';
}