| 導購 | 订阅 | 在线投稿
分享
 
 
 

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>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有