帮老师做了一个投票的网页,要投票的项很多,无法在一个页面中全部显示,用了DIV+js的隐藏和显示.
上代码:
<script>
window.οnlοad=function(){
allDiv = document.getElementsByTagName("div");
divLen = allDiv.length;
}
function a(x){
for(i=0; i<divLen; i++){
if(allDiv[i].className=="hideDiv"){
allDiv[i].style.display = "none";
}
if(allDiv[i].id=="div"+x){
allDiv[i].style.display = "block";
}
if( document.getElementById('hidB').value == x){
document.getElementById("sub").disabled = false;
}else{
document.getElementById("sub").disabled = true;
}
}
}
</script>
<style type="text/css">
.hideDiv {
display:none;
}
</style>
处理的部分:
<form action="" method="post" name="form1">
<?php
// TODO 分页函数相关
$pagesize = 20;
$picNum = $voteApplication->getPictureTotalNum();
list($startPosion, $endPosion, $finalPage)=pageDiv(1, $picNum, $pagesize);
$CurPictures = $voteApplication->getPicturesAndLimit($startPosion, $pagesize);
?>
<div id="div1" style="display: block" class="hideDiv" >
<?php // 线显示第一个大块
foreach($CurPictures as $onePic){ ?>
<div class = "imgDiv">
<img src="<?=$onePic['largerPath']?>"></img>
<a href="<?=$onePic['largerPath']?>" target="_blank" /><h2><?=$onePic['name']?></h2></a>
<input type="checkbox" name="chbPic[]" id="chbPic[]" value="<?=$onePic['id']?>" onchecked="" />投票<br>
所得票数: <?=$onePic['totalVotes']?>
</div>
<?php }?>
</div>
<?php for($i = 2; $i <= $finalPage; $i++){
list($startPosion )=pageDiv($i, $picNum, $pagesize);
$CurPictures = $voteApplication->getPicturesAndLimit($startPosion, $pagesize);
?>
<div id="div<?=$i?>" class="hideDiv" >
<?php foreach($CurPictures as $onePic){ ?>
<div class="imgDiv" >
<img src="<?=$onePic['largerPath']?>"></img>
<a href="<?=$onePic['largerPath']?>" target="_blank" /><h2><?=$onePic['name']?></h2></a>
<input type="checkbox" name="chbPic[]" id="chbPic[]" value="<?=$onePic['id']?>" onchecked="" />投票<br>
所得票数: <?=$onePic['totalVotes']?>
</div>
<?php }?>
</div>
</div>
<?php } ?>
<select οnchange="a(value)">
<?php
for($j =1; $j<= $finalPage;$j++){
?>
<option value="<?=$j?>"><?="第".$j."页"?></option>
<?php }?>
</select>
<input type="hidden" name="hidB" id="hidB" value="<?=$finalPage?>" />
<input type="submit" name="sub" id="sub" value="投票" disabled="disabled" />
<a href="/top10.php">前十的海报</a>
</form>
总结:
首先显示一个DIV:div0,将其他类似的结构DIV的class样式设置成 hidDiv。然后在js中进行处理。用select 控件的进行跳转。
以后做类似表单数据量很大的时候,DIV的显示和隐藏是一个不错的方法。