美文网首页原生Js的Demo合集
原生TabControl与年历的简单Demo

原生TabControl与年历的简单Demo

作者: 做有趣的恶魔 | 来源:发表于2017-04-15 16:48 被阅读19次

TabControl

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

</div>

二、Css样式
<style type="text/css">
 *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
 ul{list-style-type: none;}
 a{text-decoration: none;}
 /* 清除默认样式*/

 #tab-list{width: 300px;height:200px;margin: 20px auto;}
/*整个demo样式*/
 #itemlist{border-bottom: 2px solid #8B4513;height: 32px;}
 #itemlist li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
 #itemlist li:hover{cursor: pointer;}
 #itemlist li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
/*选项卡头部*/

 #tab-list div{border: 1px solid #7396B8;border-top: none;}
 #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
/*选项卡主体*/
 .show{display: block;}.hide{display: none;}
</style>
三、Js部分
<script type="text/javascript">
    window.onload = function() {
        var itemlist = document.getElementById("itemlist");
        var items = itemlist.getElementsByTagName("li");
        //获取到选项列表
        var content = document.getElementById("tab-list");
        var textDiv = content.getElementsByTagName("div");
        //获取到选项内容列表

        for(var i = 0; i < items.length; i++) {
            items[i].index = i;
            //通过为item添加属性将选项与具体内容联系在一起
            items[i].onmouseover = function() {
                for(var i = 0; i < items.length; i++) {
                    items[i].className = "";
                    textDiv[j].className = "hide";
                }
                this.className = "act
ive";
                textDiv[this.index].className = "show";
            }
        }
    }
 </script>

简易年历

一、Html页面布局
  <body>
    <div id="tab" class="calendar">
      <ul>
        <li><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
      </ul>
      <div id="text"></div>
    </div>
  </body>
二、Css样式
  <style>
    body{
      margin:0 ;
      padding:0;
    }
    .calendar{
      width: 400px;
      height: 600px;
      margin:0 auto;
      background-color: rgb(238, 221, 107);
    }
    ul{
      width: inherit;
      height: auto;
      padding: 0px;
      text-align: center;
      background-color: rgb(235, 114, 142);
    }
    li{
      margin: 10px;
      display:inline-block;
      border:1px solid blue;
      width: 100px;
      height: 100px;
    }
    #text{
      text-align: center;
    }
    .active{
      background-color: rgb(69, 153, 223);
    }
  </style>
三、Js部分
<script>
      var arr = [
        "新的一年新的开始",
        "二月233333",
        "三月春风似剪刀",
        "我在四月的早晨醒来",
        "想跟你去看五月的海",
        "在六月的暖风里奔跑",
        "撑着伞走过七月的雨夜",
        "给八月的桂花拍些照片",
        "一起庆祝我们九月的生日",
        "徒步到山里看十月的红叶",
        "到了十一月天气转凉",
        "十二月tmd我最讨厌冬天了"
      ]//定义全局的每月活动内容数组

      window.onload = function(){
        var tab = document.getElementById("tab");
        var months = tab.getElementsByTagName("li");
        var textDiv = document.getElementById("text");
        for (var i = 0; i < months.length; i++){
          months[i].index = i;
          //获取当前月份的编号
          months[i].onmouseover = myFun;
        }
        //默认显示一月的活动
        textDiv.innerHTML = '<h2>'+1+'月活动</h2><p>'+arr[0]+'</p>';
      }
      function myFun(){
        var tab = document.getElementById("tab");
        var months = tab.getElementsByTagName("li");
        var textDiv = document.getElementById("text");
        var that = this;
        for (var i = 0; i < months.length; i++) {
          months[i].className = "";
        }
          that.className = "active";
          if(that.className = "active"){
            textDiv.innerHTML = '<h2>'+(that.index+1)+'月活动</h2><p>'+arr[that.index]+'</p>';
          }
      }
    </script>

相关文章

网友评论

    本文标题:原生TabControl与年历的简单Demo

    本文链接:https://www.haomeiwen.com/subject/jfanattx.html