如何「選擇」然後觸發事件？

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