在HTML中創建一個多選文本框

-1

我想在我的網站中創建一個文本框或一個區域，並且我在頁面中有大約9個按鈕，我不想重定向到其他頁面並打開相同的頁面頁面，並在同一個文本框或我創建的區域。在HTML中創建一個多選文本框

所以，如果有人點擊按鈕1，然後打開帶淡入淡出動畫的文本1，當點擊按鈕2時，文本1淡出，文本2淡入等等。我該怎麼做？

來源

2015-05-11 Aria

無要給一個解決方案。通過提供一些代碼告訴我們你已經嘗試了什麼。 –

我還沒有任何代碼。我只想做一個獨特的網站。所以我有9個按鈕，如聯繫我們或支持或我們的項目等，我想當有人點擊每個按鈕，文本出現，並顯示有關按鈕，如聯繫我們，當點擊我們的項目按鈕，聯繫我們文本淡出並且我們的項目文本在 – Aria

中褪色到目前爲止您嘗試了什麼？ –

簡單地創建9文本框，並在頁面加載隱藏9個按鍵像這樣

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

所有文本框隱藏該文本框

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

和第一按鈕

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

顯示第一個文本框的點擊與淡入動畫

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

這裏是Demo

來源

2015-05-11 08:00:23

有什麼辦法可以將按鈕分組，而不是代碼.one .two .three，write .btnall，並且所有文本在單擊按鈕時都會淡入淡出，而只有按鈕的文本纔會消失 – Aria

@Aria what你想要什麼？ –

我試過這個代碼，使文本淡入，但我不能使它到當我點擊另一個按鈕，確認當期箱淡出，新箱的用武之地

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

來源

2015-05-11 07:58:15 Aria

在HTML中創建一個多選文本框

回答

相關問題