码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-11-17 19:54:14      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:www   utf-8   element   com   head   htm   splay   ica   滑动   

技术分享
<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>

 

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

标签:www   utf-8   element   com   head   htm   splay   ica   滑动   

原文地址:http://www.cnblogs.com/1020182600HENG/p/6074278.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!