скрыть div при нажатии на div и показать второй div

Это мой html-код ... В этом я установил div-display: none, просто хочу, чтобы при щелчке на первом div, который является серым. . Второй div появляется и исчезает первый и третий div, и когда я нажимаю на второй 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>

источник

2015-07-01 farkhund

Когда нажата внешняя кнопка .col-md-6, вы можете найти отображаемый в настоящее время 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(); 
    } 
});

Или, наконец, если вы хотите, чтобы перебрать все divs, возвращаясь к началу, как только вы достигнете конца:

$('.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/ Я изменил приведенный выше код с переходом. –

скрыть div при нажатии на div и показать второй div

ответ

Смежные вопросы