Jquery 单击div时隐藏div并显示第二个div_Jquery_Html_Css

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

jquery html css

Jquery 单击div时隐藏div并显示第二个div,jquery,html,css,Jquery,Html,Css,这是我的html代码…在这里，我设置为div'display:none'，我只想当我点击第一个div是灰色的…第二个div出现和消失第一个和第三个div，当我点击第二个div第三个和第一个div消失…请给我一些帮助…我是新的网站设计 <div class="row"> <div class="col-md-6"> <div style="background:grey"> text here &l

这是我的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>


此处文本
此处文本
此处文本

单击外部

.col-md-6

div时，您可以使用

：visible

选择器找到当前可见的

div

。然后，您可以

hide（）

那个，以及

show（）

下一个（）。试试这个：

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

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

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);
});


演示
$（文档）.ready（函数（）{
$（“#蓝色”）.hide（）；
$（“#绿色”）.hide（）；
$（“#灰色”）。在（“单击”，函数（）上）{
元(蓝色).show(3000元);；
$（“#灰色”）.hide（2000年）；
$（“绿色”）.hide（2000年）；
});
$（“#蓝色”）。在（“单击”，函数（）上）{
元(绿色).show(3000元);；
$（“#蓝”）.hide（2000年）；
$（“#灰色”）.hide（2000年）；
});
$（“#绿色”）。在（“单击”，函数（）上）{
元(灰色).show(3000元);；
$（“#蓝”）.hide（2000年）；
$（“绿色”）.hide（2000年）；
});
});
此处文本
此处文本
此处文本

Thnx@Rory…对于这样一个简单的解决方案…先生，有没有办法，如果我点击第一个div，它会随着翻转（Y）转换消失…第二个div也是如此？有没有办法，如果我点击第一个div，它会随着翻转（Y）消失转换..和第二个div..相同？请检查下面的链接以了解不同的转换我已经用转换更改了上面的代码。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <script>
     $(document).ready(function(){
     $("#blue").hide();
     $("#green").hide();

$("#grey").on("click",function(){
    $("#blue").show(3000);
    $("#grey").hide(2000);
    $("#green").hide(2000);
});
$("#blue").on("click",function(){
   $("#green").show(3000);
    $("#blue").hide(2000);
    $("#grey").hide(2000);
});
$("#green").on("click",function(){
   $("#grey").show(3000);
    $("#blue").hide(2000);
    $("#green").hide(2000);
});

});
</script>



<div class="row">
<div class="col-md-6">
    <div style="background:grey;height:50px" id="grey">
        text here
    </div>
    <div style="background:blue;height:50px" id="blue">
        text here
    </div>
    <div style="background:green;height:50px" id="green">
        text here
    </div>
   </div>
</div>
</body>
</html>