逐步显示每个div [英] Show each div step by step
问题描述
我想让这个脚本逐步显示我的div。目前的程式码只会显示所有点击的div。如何让它检测div并逐步显示.Ex:1st click => expand div for step 1,2nd clikc => expand div for step2。之后,如果div全部展开,当按钮被点击,然后隐藏所有div。
i am trying to make this script to show my div step by step. The current code will only show all the div on click. How do i make it detect the div and show step by step.Ex:1st click => expand div for step 1 , 2nd clikc => expand div for step2. After that if the div is all expanded , when the button is clicked then hide all the div.
TQ
<div id="stepshow">
<h3>Step 1</h3>
</div>
<div id="stepshow">
<h3>Step 2</h3>
</div>
<button id="stepbtn"></button>
<script>
var qqcounter = 1;
var maxstep = 3;
$("#stepbtn").text("Show step " + qqcounter);
$("#stepshow").hide();
$("#stepbtn").click(function(){
qqcounter++;
if(qqcounter < maxstep)
{
$("#stepbtn").text("Show step " + qqcounter);
$("#stepshow").slideDown();
}
else
{
$("#stepbtn").text("Hide step");
}
});
</script>
推荐答案
这是一个如何显示/隐藏的示例:
Here is an example of how to show/hide:
http://jsfiddle.net/rVwkn/14 /
jQuery:
$('#stepbtn').click( function() {
if ($('#step2').is(':visible')) {
$('#step3').show();
$('#stepbtn').hide();
} else if ($('#step1').is(':visible')) {
$('#step2').show();
}
});
$('#backbtn').click( function() {
if ($('#step3').is(':visible')) {
$('#step3').hide();
$('#stepbtn').show();
} else if ($('#step1').is(':visible')) {
$('#step1').hide();
}
});
CSS :
#step2 {
display:none;
}
#step3 {
display:none;
}
#backbtn { display: none }
HTML:
<div id="step1">
<h3>Step 1</h3>
</div>
<div id="step2">
<h3>Step 2</h3>
</div>
<div id="step3">
<h3>Step 3</h3>
</div>
<button id="stepbtn">Next Step</button>
<button id="backbtn">Go Back a Step</button>
UPDATE:
以下是另一个版本,它为您提供了更多的灵活性:
Here is another version as well, which gives you more flexibility:
jQuery:
$(document).ready( function() {
var current_step = 1;
var max_number_of_steps = 6;
$('#stepbtn').click( function() {
var next_step = current_step + 1;
$('#step'+next_step).slideDown();
$('#backbtn').show();
current_step++; // increase the step we are on...
if (current_step == max_number_of_steps) {
$('#stepbtn').hide();
}
});
$('#backbtn').click( function() {
$('#step'+current_step).slideUp();// hide it first,
current_step--; // now update, so we know the correct step we are on
if (current_step == 1) {
$('#backbtn').hide();
}
if (current_step < max_number_of_steps) {
$('#stepbtn').show(); // show, if its been hidden...
}
});
});
CSS :
#step2,#step3,#step4,#step5,#step6 {
display:none;
}
#backbtn { display: none }
HTML:
<div id="step1">
<h3>Step 1</h3>
</div>
<div id="step2">
<h3>Step 2</h3>
</div>
<div id="step3">
<h3>Step 3</h3>
</div>
<div id="step4">
<h3>Step 4</h3>
</div>
<div id="step5">
<h3>Step 5</h3>
</div>
<div id="step6">
<h3>Step 6</h3>
</div>
<button id="stepbtn">Next Step</button>
<button id="backbtn">Go Back a Step</button>
这篇关于逐步显示每个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!