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>
