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

而不是onclick，我使用了eventhandler on()（你不应该使用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()完成），我的代码并不关心。一切都被隐藏起来，只有那一个会回来。

Answer 2

我认为this jQuery Widget正是您所寻找的。易于实施且非常实用。此外，jQuery API说明可以轻松进入您的页面。

在多个div之间切换

2 个答案: