js通过a链接控制多个DIV只显示其中一个其它隐藏 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6 
 7 </head>
 8 
 9 <body style="margin:50px 0;">
10 
11 <div style="float:left; margin:0 auto; width:800px; padding-left:40px; line-height:25px;" >
12   <ul>
13    <li>
14    <a href="javascript:showDiv('id2');">显示id1的内容</a>
15   </li>
16   <li>
17    <a href="javascript:showDiv('id1');">显示id2的内容</a>
18   </li>
19   <li>
20    <a href="javascript:showDiv('id3');">显示id3的内容</a>
21   </li>
22   </ul>
23 </div>
24 
25 <div id="id1" align="center" style="display:" >
26 1111111111111111<a href="javascript:showDiv('id2');">我是id1内容的a链接，点击可回到id2的内容---显示id2内容</a>
27 </div>
28 
29 <div id="id2" align="center" style="display:none" >
30 222222222222222222222<a href="javascript:showDiv('id1');">我是id2内容的a链接，点击可回到id1的内容---显示id1内容</a>
31 </div>
32 
33 <div id="id" align="center" style="display:none" >
34 333333333333333333我是id3内容
35 </div>
36 <script language="javascript">
37 function showDiv(objId){
38  var objDiv=document.getElementById(objId);  
39     var objDiv1=document.getElementById("id1");   
40  var objDiv2=document.getElementById("id2"); 
41  var objDiv3=document.getElementById("id3"); 
42   objDiv1.style.display="none";
43   objDiv2.style.display="none";
44   objDiv3.style.display="none";
45         objDiv.style.display="";
46 }
47 </script>
48 </body>
49 </html>

 

posted @ 2016-01-11 23:44  十三月凉  阅读(6138)  评论(0)    收藏  举报
/* 看板娘 */