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

Question

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

内容在左侧，当您 "select" 它时，项目显示在右侧。

我可以使用一种解决方案，例如通过 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 = "";
        }
        };
    }
}());

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

How is something "selected" which then triggers an event?

html

javascript

select

show

radio