首页 > 代码库 > 鼠标滑动显示不同页面的效果

鼠标滑动显示不同页面的效果

2024-08-21 13:36:09   218人阅读

技术分享 
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
<div>
    <span onmouseover="demo(‘idDiv1‘)">111</span>
    <span>&nbsp;&nbsp;</span>
    <span onmouseover="demo(‘idDiv2‘)">222</span>
</div>
<div>
    <p id="idDiv1">qqqqqqqqqqqqqqqqqqqqqq</p>
    <p id="idDiv2" style="display:none">wwwwwwwwwwwwwwwwwwwwww</p>
</div>
<script language="javascript">
function demo(obj){
    for(var i=1;i<5;i++){
        var id=document.getElementById(‘idDiv‘+i);
        if(id!=null){
            id.style.display="none";
        }
    }    
    var idDiv=document.getElementById(obj);
    idDiv.style.display="block";
}
</script>
</body>
</html>
View Code
 1 <html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title></title>
 5 </head>
 6 
 7 <body>
 8 <div>
 9     <span onmouseover="demo(‘idDiv1‘)">111</span>
10     <span>&nbsp;&nbsp;</span>
11     <span onmouseover="demo(‘idDiv2‘)">222</span>
12 </div>
13 <div>
14     <p id="idDiv1">qqqqqqqqqqqqqqqqqqqqqq</p>
15     <p id="idDiv2" style="display:none">wwwwwwwwwwwwwwwwwwwwww</p>
16 </div>
17 <script language="javascript">
18 //方法一
19 function demo(obj){
20     for(var i=1;i<5;i++){
21         var id=document.getElementById(‘idDiv‘+i);
22         if(id!=null){
23             id.style.display="none";
24         }
25     }    
26     var idDiv=document.getElementById(obj);
27     idDiv.style.display="block";
28 }
29 //方法二  获取所有的ID,并比较是哪个id选中，则其他id不显示
30 </script>
31 </body>
32 </html>

 

鼠标滑动显示不同页面的效果


联系
我们