Question

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

Answer 1

可能会帮助你

在第一个按钮点击事件

上

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

在第二个按钮单击事件

上

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

Answer 2

$('button').click(function(){    
  if(this.id == 'btn1'){
    $('.div1').show();
    $('.div2').hide();
  }else{
    $('.div1').hide();
    $('.div2').show();
  }
})

div{
  width: 200px;
  height: 200px;
  background: cornflowerblue;
  line-height: 200px;
  text-align: center;
  margin: 10px;
}

.div1{
  display: block;
  background: crimson;
}

.div2{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  DIV 1
</div>

<div class="div2">
  DIV 2
</div>

<button id="btn1">show Div 1</button>
<button id="btn2">show Div 2</button>

Answer 3

function onButton1Click(){
     document.getElementById('mybox1').style.display = "";
     document.getElementById('mybox2').style.display = "none";
}

function onButton2Click(){
     document.getElementById('mybox2').style.display = "";
     document.getElementById('mybox1').style.display = "none";
}

我认为上面的代码应该

Answer 4

假设第一个按钮的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>

Answer 5

<button id='button1'>1</button>
<button id='button2'>2</button>

<div id='div1'>example 1</div>
<div  id='div2'>example 2</div>    

$(function(){

  $('#button1').on('click',function(){
    $('#div1').show();
    $('#div2').hide();
  });

  $('#button2').on('click',function(){
    $('#div2').show();
    $('#div1').hide();
  });

});

$（function（）{与$（document）.ready（function（）{与文档准备就绪时相同。
on方法是关联一个事件，在这种情况下是click事件
show（）和hide（）方法的名称暗示显示或隐藏与被调用方法关联的元素。

https://jsfiddle.net/xzL75y8z/

Answer 6

这是你期望的吗？

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

Jquery的

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

    $("#DivTwo").hide();
    $("#DivOne").show();
});


$("#hideshow2").click(function(){
    $("#DivOne").hide();
    $("#DivTwo").show();
});

Answer 7

试试这个希望它有效。

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


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

Answer 8

您可以使用一个按钮来切换div。但是，我不知道你的要求的背景，所以在这里你......一个小小提琴

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

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

fiddle

的链接

Answer 9

使用这个简单的JavaScript代码：

html div：

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

和javascript函数

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

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

9 个答案: