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

-3

我有两个div。我需要2个按钮，每个按钮一个。显示第一个div，但第二个隐藏。当我按下第二个div的按钮时，它会显示，第一个div将隐藏起来。再次，当我按下第一个div的按钮时，第一个div将显示，第二个将隐藏。我需要这两个按钮的html和js代码。请帮忙。 :)显示div并隐藏另一个div按按钮

来源

2016-08-18 Danny

什么都有你尝试过et c。我们在这里帮助修改和修复您的代码，但不适合您的功能。 – Option

你有.hide（）和.show（）的jquery做到这一点 –

我coundn't找到一个精确的jsfiddle答案。我只想要一个简单的按钮显示开关。 – Danny

$('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>

来源

2016-08-18 09:21:58 z0mBi3

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"; 
}

我觉得上面的代码应该做

来源

2016-08-18 09:16:23 anandharshan

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

来源

2016-08-18 09:19:38

<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(); 
    }); 

});

$（函数（）{相同$（文件）。就绪（函数（）{用于当文档准备好。
上的方法是关联到在这种情况下
显示（）一个事件点击事件和隐藏（）方法是如名称暗示显示或隐藏关联到被调用的方法的元素。

https://jsfiddle.net/xzL75y8z/

来源

2016-08-18 09:19:40

可能，这将帮助你

的第一个按钮点击事件

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

的第二个按钮点击事件

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

来源

2016-08-18 09:21:39 Ankit

这是你所期望的吗？

<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(); 
});

来源

2016-08-18 09:26:37 Simo

试试这个希望工程。

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


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

来源

2016-08-18 09:27:06

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

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

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

链接，fiddle

来源

2016-08-18 09:29:49

使用这种简单的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'; 
}

来源

2016-08-18 09:31:40

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

回答

相关问题