Javascript 3按钮Jquery开/关和两个开/关

我有3个按钮：按钮1、按钮2和按钮3。按钮1切换左侧的显示/隐藏。按钮2的作用相同，但位于右侧。按钮3两边都有。正确的方法是什么

列表
地图
二者都


地图边
第3区
第4区
单方
第5区
第6区


$（文档）.ready（函数（）{
$（“#两个映射按钮”）。单击（函数（）{
//警报（“单击两个按钮”）；
$（“#block-4、#block-3、#block-5、#block-6”）.hide（）；
$（“#block-4，#block-3，#block-5，#block-6”）.addClass（“acvite btn”）；
$（“#block-4，#block-3”）.show（）；
$（“#block-5，#block-6”）.show（）；
});
$（“#映射按钮”）。单击（函数（）{
//警报（“单击地图按钮”）；
$（“#块-5”）.toggle（）；
$（“#块-6”）.toggle（）；
});
$（“#列表映射按钮”）。单击（函数（）{
//警报（“单击列表按钮”）；
$（“#块-4”）.toggle（）；
$（“#块-3”）.toggle（）；
});
});

您可以简单地使用一个变量来保存您的状态。注意，我对示例中的循环进行了硬编码，因为我们总是处理三个按钮

inputs=document.getElementsByTagName（'input'）；
状态=0；
对于（变量i=0；i<3；i++）{
（职能（一）{
输入[i]。addEventListener（'click'，函数（）{
州^=（i+1）；
对于（var j=1；j<3；j++）{
输入[j-1].classList.toggle（'on'，（j&state））；
}
});
}（i） ）；
}

输入{
背景：浅灰色
}
输入端{
背景：红色
}
输入{
背景：柠檬黄
}

做什么的正确方法是什么？到目前为止，您尝试过什么？我尝试过让每个按钮单击，然后显示隐藏内容。我遇到的问题是，如果每侧有2个显示/隐藏按钮，那么如果同时有显示和隐藏按钮，则会出现错误。我建议将此信息添加到问题和相关代码中。因此，删除和添加基于按钮的块。正如您在单击“删除4”和“删除5”并保留其他2时所看到的那样。就像你点击地图和列表按钮一样。当然，如果你先单击“两个”按钮，它将无法按我希望的方式工作。首先尝试列表和映射，然后“两个”按钮应执行相同的操作，但并非所有4个块都切换到2。将此问题标记为“非主题”，因为不清楚您在问什么。请编辑您的问题，以澄清到底哪里出了问题以及您想要什么。

<div id="list-map-button" class="btn map-btn">LIST</div>
<div id="map-map-button" class="btn map-btn">MAP</div>
<div id="both-map-button" class="btn map-btn map-btn-active">BOTH</div>
<br style="clear:both;"/>
<div class="container">
    <div id="left_side">
        map side
        <div  id="block-3">Block 3</div>
        <div id="block-4" class="not-active-block">Block 4</div>
    </div>
    <div id="right_side">
        list side
        <div id="block-5">Block 5</div>
        <div id="block-6" class="not-active-block">Block 6</div>
    </div>
    <br style="clear:both;"/>
</div>

    $(document).ready(function(){    
    $( "#both-map-button" ).click(function() {
        //alert('clicked both button');
        $("#block-4, #block-3, #block-5, #block-6").hide();
        $("#block-4, #block-3, #block-5, #block-6").addClass("acvite-btn");

        $("#block-4, #block-3").show();
        $("#block-5, #block-6").show();

    });
    $( "#map-map-button" ).click(function() {
        //alert('clicked map button');
        $("#block-5").toggle();
        $("#block-6").toggle();
    });
    $( "#list-map-button" ).click(function() {
         //alert('clicked list button');
        $("#block-4").toggle();
        $("#block-3").toggle();
    });
 });