关于选项卡切换实验javascript-原创手记-慕课网

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */ 
   *{
       padding:0px;
       margin:0px;
       font:12px;
   }
   #tabs
   {
       width:290px;
       padding:5px;
       height:190px;
       margin:20px;

   }
   #tabs ul{
      list-style:none;
       display:block;
       height:30px;
     /*  line-height:30px;*/
       border-bottom:2px  solid saddlebrown;
   }
  #tabs ul li{
      background:#fff;
      cursor:pointer;/*cursor 属性规定要显示的光标的类型（default是指针，pointer是手掌；wait：等待；text：是光标输入；auto默认的*/
     float:left;
      list-style:none;
      height:28px;
      line-height:28px;
      margin:0px 3px;
      border:1px solid #ccc;
     /* border-bottom:none;*/
      display:inline-block;
      /*display:block就是将元素显示为块级元素.
     block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

　　display:inline就是将元素显示为行内元素.

　　inline元素的特点是：
　　和其他元素都在一行上;高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
  　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

　　让一个inline元素从新行开始；
　　让块元素和其他元素保持在一行上；
　　控制inline元素的宽度（对导航条特别有用）；
　　控制inline元素的高度；
　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。

　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)*/
      width:60px;
      text-align:center;

  }
  #tabs ul li.on{
      border-top:2px solid saddlebrown; 
      border-bottom:2px solid #fff;
  }
  #tabs div{
      height:120px;
      line-height:25px;
      border:1px solid #336699;
  }
  .hide{
      display:none;
  }
    a:link,a:visited{
        text-decoration:none;
        color:black;    
    }   
    a:hover,a:active{
        color:orange;
        text-decoration:underline;
    }

    </style>
    <script type="text/javascript">

    // JS实现选项卡切换
    window.onload=function(){
        var oTab=document.getElementById("tabs");
        var oUl=oTab.getElementsByTagName("ul")[0];
        var oLis=oUl.getElementsByTagName("li");
        var oDivs=oTab.getElementsByTagName("div");
        for(var i=0,len=oLis.length;i<len;i++)
        {
            oLis[i].index=i;
            /*把i的值储存到index中，在oDivs[this.index].className = "";这句中this.index的值是当前鼠标所在的元素，oLis[i].index = i;的意义是可以让this.index获取任意一个index值
            1.通过遍历，给相应的元素设置索引值。
            2.将索引值为i的li标签的类名设置为空，也就是暂时删除hide类名          3.this就是指当前高亮的元素
            4.让当前的div元素显示*/

            oLis[i].onmouseover=function(){
                for(var n=0;n<len;n++){
                oLis[n].className="";
                oDivs[n].className="hide";
            }
            this.className="on";
            oDivs[this.index].className="";
        }
    };
    }

    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
<ul>
  <li class="on">房产</li> 
  <li >家具</li>
  <li >二手房</li>
</ul>
    <div >
       <a href="#">275万购昌平邻铁三居 总价20万买一居</a><br/>
       <a href="#">200万内购五环三居 140万安家东三环</a><br/>
       <a href="#">北京首现零首付楼盘 53万购东5环50平</a><br/>
       <a href="#">京楼盘直降5000 中信府 公园楼王现房</a>
    </div>
     <div class="hide">
        <a href="#">40平出租屋大改造 美少女的混搭小窝</a><br/>
        <a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>
        <a href="#">新中式的酷色温情 66平撞色活泼家居</a><br>
        <a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
    </div>
      <div class="hide">
        <a href="#">40平出租屋大改造 美少女的混搭小窝</a><br/>
        <a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>
        <a href="#">新中式的酷色温情 66平撞色活泼家居</a><br>
        <a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a>
    </div>
</div>    
</body>
</html>