在HTML中创建多选文本框

Question

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

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

Answer 1

只需在页面加载时创建9个文本框和9个按钮，就像这样隐藏所有文本框

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

隐藏此文本框

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

点击第一个按钮

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

显示第一个带有fadeIn动画的文本框

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

这是Demo

Answer 2

我已尝试使用此代码使文本淡入，但是当我点击另一个按钮时，我无法进行此操作，当前框淡出并出现新框。

＆＃13;

＆＃13;

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


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

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

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

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




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

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

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

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

＆＃13;

＆＃13;

＆＃13;