在多个div之间切换

Question

我有一个问题。 我想在许多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;          
}

Answer 1

我使用事件处理程序on()代替了onclick（您不应使用内联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会回来。

Answer 2

我认为这个jQuery Widget正是您想要的。 易于实施且非常有用。 另外，jQuery API指令使您轻松进入页面。