继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于选项卡切换实验javascript

qq_漠然_3
关注TA
已关注
手记 8
粉丝 5
获赞 61
<!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>
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP