jquery - 单击 div 时隐藏 div 并显示第二个 div

Question

这是我的 html 代码...在此，我将 div 设置为“display:none”，我只希望当我单击第一个灰色的 div 时...第二个 div 出现并首先消失，第三个div，当我点击第二个 div 时，第三个和第一个 div 消失了……请给我一些帮助……我是网站设计的新手……

<div class="row">
    <div class="col-md-6">
        <div style="background:grey">
            text here
        </div>
        <div style="background:blue;display:none">
            text here
        </div>
        <div style="background:green;display:none">
            text here
        </div>
    </div>
</div>

Answer 1

当外层.col-md-6 div被点击可以找到当前可见的div使用 :visible选择器。然后你可以 hide()那，和show() next() .试试这个:

$('.col-md-6').click(function() {
    $(this).find('div:visible').hide().next().show();
});

Example fiddle

或者，如果您不想让某人隐藏最后的 div :

$('.col-md-6').click(function() {
    var $current = $(this).find('div:visible');
    var $next = $current.next()
    if ($next.length) {
        $current.hide();
        $next.show();
    }
});

或者最后，如果您想循环遍历所有 div，一旦到达终点就回到起点:

$('.col-md-6').click(function() {
    var index = $(this).data('index') || 1;
    var $divs = $(this).find('div');
    $divs.hide().eq(index % $divs.length).show();
    $(this).data('index', ++index);
});