Javascript 在多个div之间切换

我有个问题。我想在多个div之间切换，其中一个显示其余的隐藏。 这就是我目前所拥有的

提前谢谢

<a href="#n" onclick="toggle_visibility('box1');">
    <div class="square img_1-1"></div>
</a>

<a href="#n" onclick="toggle_visibility('box2');">
    <div class="square img_1-2"></div>
</a>

<a href="#n" onclick="toggle_visibility('box3');">
    <div class="square img_1-3"></div>
</a>

    <div id="box1" style='display:none;'>
        <div class="trabajo">
            <p>box1</p>
        </div>
    </div>

    <div id="box2" style='display:none;'>
        <div class="trabajo">
            <p>box2</p>
        </div>
    </div>

    <div id="box3" style='display:none;'>
        <div class="trabajo">
            <p>box3</p>
        </div>
    </div>

<a href="#n" onclick="toggle_visibility('box4');">
    <div class="square img_2-1"></div>
</a>

<a href="#n" onclick="toggle_visibility('box5');">
    <div class="square img_2-2"></div>
</a>

<a href="#n" onclick="toggle_visibility('box6');">
    <div class="square img_2-3"></div>
</a>

    <div id="box4" style='display:none;'>
        <div class="trabajo">
            <p>box4</p>
        </div>
    </div>

    <div id="box5" style='display:none;'>
        <div class="trabajo">
            <p>box5</p>
        </div>
    </div>

    <div id="box6" style='display:none;'>
        <div class="trabajo">
            <p>box6</p>
        </div>
    </div>

我以前也试过另一个javascript代码，这个代码运行得很好，唯一没有做的就是切换它只是显示工作，而不是隐藏它，尽管它在不同的工作之间切换

top.visible_div_id = 'box1';
function toggle_visibility(id) {
    var old_e = document.getElementById(top.visible_div_id);
    var new_e = document.getElementById(id);
    if(old_e) {
        console.log('old', old_e, 'none');
        old_e.style.display = 'none';
    }
    console.log('new', new_e, 'block');
    new_e.style.display = 'block';   
    top.visible_div_id = id;          
}

---

我没有使用onclick，而是使用了不应该内联javascript的eventhandler。我将其与数据属性相结合：

<a data-toggles="#box2">box 2</a>

您可以使用：not选择器，但更明显的是： 这里的诀窍是“带回来”这句话。我使用data属性的值作为我们想要返回的实际元素的选择器

---

此代码比您的代码有很大的优势。如果您再添加1个元素，您的计数器将知道这可以通过.length完成，我的代码不在乎。一切都隐藏起来了，只有我会回来。

我想这正是你要找的。易于实现，非常实用。另外，jQueryAPI指令使您轻松进入页面

您能提供我们可以使用的JSFIDLE代码吗？

<a data-toggles="#box2">box 2</a>

$('a.triggeringAnchor').on('click', function(e){
    e.preventDefault() // stop the anchor
    $('a.triggeringAnchor').hide(); // hide them all
    $( $(this).data('toggles') ).show(); // bring the one back in the one back
})