如何“选择”然后触发事件？

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(); 
    }); 
}); 

UPDATE

这里是一个只有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 = ""; 
     } 
     }; 
    } 
}());