hide div當點擊div和顯示第二格

這是我的html代碼...在這裏，我設置爲div'顯示：無'，我只想當我點擊第一個div是灰色的.. 。第二個DIV出現和消失第一和第三格，當我點擊第二個div第三和第一個div消失....請給我一些help..i是對網站設計新...hide 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>

來源

2015-07-01 farkhund

當單擊外部.col-md-6 div時，可以使用:visible選擇器找到當前可見的div。那麼您可以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); 
});

來源

2015-07-01 07:10:36

Thnx @Rory ...對於這樣一個簡單的解決方案...先生，有沒有什麼辦法，如果我點擊第一個div它消失與翻轉（Y）過渡..並與第二個div相同..？ – farkhund

<!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>

來源

2015-07-01 07:26:42

有沒有什麼辦法，如果我點擊第一個div它會消失與翻轉（Y）過渡..和第二個div相同..？ – farkhund

請檢查下面的鏈接以進行不同的轉換 http://api.jquery.com/hide/ 我已經通過轉換更改了上述代碼。 –

hide div當點擊div和顯示第二格

回答

相關問題