电脑技术学习

javascript实现四个重叠DIV切换功能

dn001

HTML如下

<html>

<script src="/static/js/jquery-1.2.6.js" type="text/javascript"></script>

<style type="text/css">

.jdjj
{

}

</style>
<div><table><tr><td><a href="#"></a></td><td><a href="#" onclick="jdjjchange(0)">DIV1</a></td><td><a href="#"onclick="jdjjchange(1)">DIV2</a></td><td><a href="#"onclick="jdjjchange(2)">DIV3</a></td><td><a href="#"onclick="jdjjchange(3)">DIV4</a></td></tr></table></div>
<div id="jdjj">
<div class="jdjj" >1</div>
<div class="jdjj"; style="display:none;">2</div>
<div class="jdjj"; style="display:none;">3</div>
<div class="jdjj"; style="display:none;">4</div>
</div>

</html>

<script type="text/javascript">

function jdjjchange(i) {
$(".jdjj").hide().eq(i).show();
}

</script>


</html>