带有一个文本区域的多个按钮

Question

我刚刚开始使用CSS而且我不太了解它，这就是我寻求帮助的原因。

我想有3个按钮，只有一个文本区域（不可编辑），当我点击按钮时会改变。如我的屏幕截图所示，点击1后，我显示了文本bla bla bla。如果我点击按钮2，我想要用blo blo blo替换bla bla bla。

干杯

Answer 1

您可以使用jQuery

完成此操作

脚本：

$('button').click(function(){
   var b= this.id;
    var txt=$("#txt");
    if(b==="b1")
        txt.val("bla bla bla");
    else if(b==="b2")
        txt.val("blo blo blo");
    else if(b==="b3")
        txt.val("ble ble ble");
});

HTML：

<textarea id="txt">bla bla bla</textarea>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>

FIDDLE DEMO

Answer 2

使用Javascript完成的简单示例。 （根据点击的按钮传递不同的参数）

小提琴：http://jsfiddle.net/gHb2u/1/

代码：

<script type="text/javascript">
    var changeText = function(buttonId){
    var label = document.getElementById('label');
    if (buttonId == 1){
        label.innerHTML = "1";
    }
    else if (buttonId == 2){
     label.innerHTML = "2";
    }
    else{
     label.innerHTML = "3";
    }
}
</script>

<button onclick="changeText(1)">1</button>
<button onclick="changeText(2)">2</button>
<button onclick="changeText(3)">3</button>

<label id="label">Text</label>