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

如何选择＆＃34;＆＃34;然后触发事件？

1 个答案: