在HTML中创建一个多选文本框

Question

我想在我的网站中创建一个文本框或一个区域，并且我在页面中有大约9个按钮，我不想重定向到其他页面并打开相同的页面页面，并在同一个文本框或我创建的区域。

所以，如果有人点击按钮1，然后打开带淡入淡出动画的文本1，当点击按钮2时，文本1淡出，文本2淡入等等。我该怎么做？

Answer 1

简单地创建9文本框，并在页面加载隐藏9个按键像这样

<input class="one" value="Text 1"> 

所有文本框隐藏该文本框

$(function(){ 
    $('.one').hide(); 
}) 

和第一按钮

<button class="btn1">Button 1</button> 

显示第一个文本框的点击与淡入动画

$('.btn1').click(function() { 
    $('.one').fadeIn(); 
}); 

这里是Demo

Answer 2

我试过这个代码，使文本淡入，但我不能使它到当我点击另一个按钮，确认当期箱淡出，新箱的用武之地

.modalDialog { 
 
\t /*border:dotted; 
 
\t border-color:#00FF00;*/ 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 500; 
 
\t /*background: rgba(0,0,0,0.8);*/ 
 
\t z-index: 200; 
 
\t opacity:999; 
 
\t -webkit-transition: opacity 400ms ease-in; 
 
\t -moz-transition: opacity 400ms ease-in; 
 
\t transition: opacity 400ms ease-in; 
 
\t pointer-events: none; 
 
\t position:absolute; 
 
\t width:450px; 
 
\t height:700px; 
 
\t max-height:700px; 
 
\t max-width:450px; 
 
\t margin-top:20px; 
 
\t margin-left:250px; 
 
\t 
 

 

 
} 
 
.modalDialog:target { 
 
\t opacity:1; 
 
\t pointer-events: auto; 
 
} 
 

 
.modalDialog > div { 
 
\t position:absolute; 
 
\t max-height:700px; 
 
\t max-width:450px; 
 
\t margin: 10% auto; 
 
\t padding: 0px 20px 13px 20px; 
 
\t border-radius: 10px; 
 
\t /*background: #FE9A2E;*/ 
 
\t background: -moz-linear-gradient(#FE9A2E, #F7BE81); 
 
\t background: -webkit-linear-gradient(#FE9A2E, #F7BE81); 
 
\t background: -o-linear-gradient(#FE9A2E, #F7BE81); 
 
} 
 

 
.close { 
 
\t background: #606061; 
 
\t color: #FFFFFF; 
 
\t line-height: 25px; 
 
\t position: absolute; 
 
\t right: -12px; 
 
\t text-align: center; 
 
\t top: -10px; 
 
\t width: 24px; 
 
\t text-decoration: none; 
 
\t font-weight: bold; 
 
\t -webkit-border-radius: 12px; 
 
\t -moz-border-radius: 12px; 
 
\t border-radius: 12px; 
 
\t -moz-box-shadow: 1px 1px 3px #000; 
 
\t -webkit-box-shadow: 1px 1px 3px #000; 
 
\t box-shadow: 1px 1px 3px #000; 
 
} 
 

 
.close:hover { background: #00d9ff; } 
 

 

 

 

 
.modalDialog2{ 
 
\t position: fixed; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t background: rgba(0,0,0,0.8); 
 
\t z-index: 99999; 
 
\t opacity:0; 
 
\t -webkit-transition: opacity 400ms ease-in; 
 
\t -moz-transition: opacity 400ms ease-in; 
 
\t transition: opacity 400ms ease-in; 
 
\t pointer-events: none; 
 
} 
 
.modalDialog2:target { 
 
\t opacity:1; 
 
\t pointer-events: auto; 
 
} 
 

 
.modalDialog2 > div { 
 
\t width: 1000px; 
 
\t position: relative; 
 
\t margin: 5% auto; 
 
\t padding: 5px 20px 13px 20px; 
 
\t border-radius: 10px; 
 
\t background: #FE9A2E; 
 
\t background: -moz-linear-gradient(#FE9A2E, #F7BE81); 
 
\t background: -webkit-linear-gradient(#FE9A2E, #F7BE81); 
 
\t background: -o-linear-gradient(#FE9A2E, #F7BE81); 
 
} 
 

 
.close { 
 
\t background: #606061; 
 
\t color: #FFFFFF; 
 
\t line-height: 25px; 
 
\t position: absolute; 
 
\t right: -12px; 
 
\t text-align: center; 
 
\t top: -10px; 
 
\t width: 24px; 
 
\t text-decoration: none; 
 
\t font-weight: bold; 
 
\t -webkit-border-radius: 12px; 
 
\t -moz-border-radius: 12px; 
 
\t border-radius: 12px; 
 
\t -moz-box-shadow: 1px 1px 3px #000; 
 
\t -webkit-box-shadow: 1px 1px 3px #000; 
 
\t box-shadow: 1px 1px 3px #000; 
 
} 
 

 
.close:hover { background: #00d9ff; }