                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

太久没写了，忘记了，还看了下以前的，写出来的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
        * {
            margin:0;
            padding:0;
        }
        body {
            font-size:14px;
            line-height:1.5;
        }
        div {
            clear:both;
        }
        ul {
            overflow:hidden;
        }
        ul li{
            list-style:none;
        }
        a {
            color:#000;
            font-size:12px;
            text-decoration:none;
            padding-bottom:2px #fff solid;
        }
        a:hover,.active>a {
            color:red;
            text-decoration:underline;
        }
        div {
            display:none;
            width:300px;
        }
        div.current {
            display:block;
        }
        #nav li {
            float:left;
        }
        #nav li a {
            display:block;
            padding:5px;
            margin-right:5px;
            border:1px #ccc solid;
        }
        .item {
            border:1px #000 solid;
        }

    </style>
    <script type="text/javascript">
    // JS实现选项卡切换
        window.onload = function() {
            var oUl = document.getElementById('nav');
            var aLi = oUl.getElementsByTagName('li');
            var aDiv = document.getElementsByTagName('div');

            for(var i=0; i<aLi.length; i++) {
                aLi[i].index = i;
                aLi[i].onclick = function() {
                    for(var i=0; i<aLi.length; i++) {
                        if(aLi[i].className == 'active') {
                            aLi[i].className = '';
                            aDiv[i].style.display = 'none';
                        }
                        this.className = 'active';
                        aDiv[this.index].style.display = 'block';
                    }
                }
            }
        }

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

</body>
</html>