| 订阅 | 在线投稿
分享
 
 
 

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

2008-10-21 08:21:21  编辑来源:互联网  宽屏版  评论

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>

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>
󰈣󰈤
 
 
 
>>返回首页<<
 
 
 转载本文
 UBB代码 HTML代码
复制到剪贴板...
 
 热帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号wangchaonetcn
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有