在多个 div 之间切换答案

【问题标题】：Toggle between multiple divs在多个 div 之间切换
【发布时间】：2014-10-20 18:42:17
【问题描述】：

我有一个问题。我想在许多 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。我正在使用 toggle_visibility(id) 问题是，当我隐藏一个框并打开另一个框时，它开始变得奇怪，它同时打开，然后它就变得奇怪了。它让两个都打开，然后关闭一个。

var prevId;

function toggle_visibility(id) {
    if(prevId && id !== prevId){
        $("#"+prevId).toggle();
    }
    var e = document.getElementById(id);

    $(e).toggle();
    prevId = id;

}

还有另一个我之前尝试过的 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;          
}

【问题讨论】：

你能提供一个我们可以使用的代码的 jsfiddle 吗？
jsfiddle.net/luis4567/wj2zm0mq/1

标签： javascript jquery html toggle show-hide

【解决方案1】：

我使用了事件处理程序 on() 而不是 onclick（你不应该使用 inline-javascript）。我将它与数据属性结合起来：

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

对你的 javascript 进行一些更改：

$('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
})

您可以使用:not() 选择器，但这更明显:)
这里的诀窍是“带回来”线。我使用 data-attribute 的值作为我们想要返回的实际元素的选择器。

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

【讨论】：

【解决方案2】：

我认为this jQuery Widget 正是您正在寻找的。易于实施且非常实用。此外，jQuery API 指令使您可以轻而易举地进入您的页面。

【讨论】：