页面切换

2016-11-16  本文已影响3人  蛮大人我们走
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
    *{
        margin: 0;
        padding: 0;
    } 
     #title{
        float: left;
        margin: 20px;
        padding: 5px;
        width: 290px;
        height: 150px;
     }
    ul{
        list-style-type: none;
        height: 30px;
        display: block;
        border-bottom: 2px solid saddlebrown;
    }

    li{
        background-color: #fff;/*背景设置为白色 才可以遮住边框*/
        cursor: pointer;
        float: left;
        margin-left: 24px;
        display: block;
        width: 60px;
        height: 28px;/*将棕色部分的2px空出来*/
        line-height: 30px;
        border: 1px solid black;
        border-bottom:none ;
        text-align: center;
        display: inline-block;
        
    }
    .on{
        border-top: 2px solid saddlebrown;
        border-bottom: 2px solid #fff;
    }
    #content{
        height: 120px;
        line-height: 25px;
        
        border: 1px solid black;
        border-top: none;
        
        padding: 5px;
        position: relative;
    }
    .hide{
        visibility: hidden;
    }
    .show{
        visibility: visible;
    }
    #content p{
        position: absolute;
        margin: 5px;
    }
    </style>
    <script type="text/javascript">
        document.onload=function(){
            
            for(var a=0;a<pNodes.length;a++){
                alert(pNodes[a].id);
            }
        }
    // JS实现选项卡切换
    function oncur(obj){
        var x=obj.id.split("");
        var y=Number(x[1]);//输出y的值为0,1,2到这里没问题
        //alert(y);
        
        var pNodes=document.getElementsByTagName("p");
        var lNodes=document.getElementsByTagName("li");
        
        for(var j=0;j< lNodes.length;j++){
            //console.log(j);
            if(obj.id==lNodes[j].id){
                
                lNodes[j].setAttribute("class","on");   
            }else{
                console.log(lNodes[j].nodeType);
                if(lNodes[j]!=undefined){
                lNodes[j].removeAttribute("class");}
            }
        }
        for(var i=0;i<pNodes.length;i++){
            
            if(i==y){
                pNodes[i].setAttribute("class","show");
            }else{
                pNodes[i].setAttribute("class","hide");
            }
        }
    
        
        //pNodes[y].setAttribute("class","show");
        
//      switch(x){
//          case "t1": 
//          //var x=document.getElementById("p1");
//          pNodes[0].setAttribute("class","show");
//          pNodes[1].setAttribute("class","hide");
//          pNodes[2].setAttribute("class","hide");
//          t1.setAttribute("class","on");
//          t2.setAttribute("class","");
//          t3.setAttribute("class","");
//          break;
//          case "t2": 
//          //var x=document.getElementById("p2");
//          //pNodes[1].setAttribute("id","t1");
//          t1.setAttribute("class","");
//          t2.setAttribute("class","on");
//          t3.setAttribute("class","");
//          pNodes[1].setAttribute("class","show");
//          pNodes[0].setAttribute("class","hide");
//          pNodes[2].setAttribute("class","hide");
//          break;
//          case "t3": 
//          t3.setAttribute("class","on");
//          t2.setAttribute("class","");
//          t1.setAttribute("class","");
//          pNodes[2].setAttribute("class","show");
//          pNodes[1].setAttribute("class","hide");
//          pNodes[0].setAttribute("class","hide");
//          break;
//      }
    }
    </script>

</head>
<body>
<!-- HTML页面布局 -->
    <div id="title">
        <ul>
            <li class="on" id="t0" onmouseover="oncur(this)">房产</li>
            <li id="t1" onmouseover="oncur(this)">家居</li>
            <li id="t2" onmouseover="oncur(this)">二手房</li>
        </ul>

    <div id="content" >
        <p  id="p1" class="">
            275万购昌平邻铁三居 总价20万买一居<br />
            200万内购五环三居 140万安家东三环<br />
            北京首现零首付楼盘 53万购东5环50平<br />
            京楼盘直降5000 中信府 公园楼王现房<br />
        </p>
        <p  id="p2" class="hide">
            40平出租屋大改造 美少女的混搭小窝<br />
            经典清新简欧爱家 90平老房焕发新生<br />
            新中式的酷色温情 66平撞色活泼家居<br />
            瓷砖就像选好老婆 卫生间烟道的设计<br />
        </p>
        <p class="hide" id="p3">
            通州豪华3居260万 二环稀缺2居250w甩<br />
            西3环通透2居290万 130万2居限量抢购<br />
            黄城根小学学区仅260万 121平70万抛!<br />
            独家别墅280万 苏州桥2居优惠价248万<br />
        </p>
    </div>
    </div>
</body>
</html>

让人无限纠结的一个问题在循环这里,for循环和foreach循环的差别!

 for(variable in object)   
  statement

variable 是声明一个变量的var语句,表示数组的一个元素或者是对象的一个属性。在循环体内部,对象的一个属性名会被作为字符串赋给变量variable。

参考博文:http://www.jb51.net/article/64761.htm

Tip:for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

注意:for-in循环实际是为循环”enumerable“对象而设计的,且for in循环不会按照属性的下标来排列输出。

不推荐用for-in来循环一个数组,因为,不像对象,数组的 index 跟普通的对象属性不一样,是重要的数值序列指标。
总之, for – in 是用来循环带有字符串key的对象的方法。

关于其他循环的参考博文:http://www.jb51.net/article/86076.htm
上一篇 下一篇

猜你喜欢

热点阅读