javascript - "selected"是如何触发事件的？

Question

我的意思是，例如，您有两个容器，一个在左边，一个在右边。

内容位于左侧，当您“选择”它时，项目将显示在右侧。

我可以使用诸如通过 javascript 隐藏/display: none/inline-block;

的解决方案

我想到了一个单选按钮，但我不确定这是否仅限于物理按钮，我希望单击面板并且边框突出显示以表明它已被选择。

Answer 1

这是一个相当基本的示例。我认为这就是您想要实现的目标。 http://jsfiddle.net/y8qko88g/1/

<div id="wrap">
    <input type="button" id="left" value="left" />
    <input type="button" id="right" value="right" />
</div>

$(function(){
    $("#right").hide();

    $("#left").click(function(){
        $("#left").hide();
        $("#right").show();
    });
    $("#right").click(function(){
        $("#left").show();
        $("#right").hide();
    });
});

更新

这里有一个仅使用 javascript 完成的更高级的选项。 http://jsfiddle.net/1dy4ogzb/

<form id="radioButtons">
    <input type="radio" name="foo" value="left" checked="checked" />Left
    <br>
    <input type="radio" name="foo" value="right" />Right
</form>
<div id="left">this is left</div>
<div id="right" class="hideMe">this is right</div>

(function() {
    var trans = document.forms['radioButtons'].elements['foo'];
    var l = document.getElementById("left");
    var r = document.getElementById("right");

    for (var i=0, len=trans.length; i<len; i++) {trans[i].onchange = function() {
        if(this.value === "left"){
            l.className = "";
            r.className = "hideMe";
        } else{
            l.className = "hideMe";
            r.className = "";
        }
        };
    }
}());