Js实现选项卡的一个小程序,界面有点丑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active{
background: yellow;
}
#div1 div{
width: 200px;
height: 200px;
background: #CCCCCC;
border: 1px solid red;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//获得选项卡,是一个数组
var Btns = oDiv.getElementsByTagName('input');
//获得下面的div,是一个数组
var Divs = oDiv.getElementsByTagName('div');
for (var i= 0;i<Btns.length;i++) {
//添加自定义的属性,作为标记号,JavaScript中添加不会报错,但是在html中添加可能导致不兼容
Btns[i].index = i;
Btns[i].onclick = function(){
//每次显示前需要将之前的状态清空
for (var i= 0;i<Btns.length;i++) {
Btns[i].className="";
Divs[i].style.display = 'none';
}
//激活选项卡,显示下面的div
this.className='active';
Divs[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display: block;">11111</div>
<div>21231313</div>
<div>fjiejfoaj</div>
<div>fejaofjeiofje</div>
</div>
</body>
</html>
js小程序日历,实现方式和选项卡不同.功能一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style-type: none;
background: yellowgreen;
float: left;
width: 50px;
margin-left: 10px;
}
.active{
background: red;
}
</style>
<script>
window.onload = function(){
var arr = [
'快过年了,大家商量一个去哪里玩啊',
'ajfeoajfifjeaof2月',
'架飞机饿哦就覅额3月',
'交付及诶阿佛加尔发放4月',
'快过年了,大家商量一个去哪5月',
'ajfeoajfifjeaof6月',
'架飞机饿哦就覅额7月',
'交付及诶阿佛加尔发放8月',
'快过年了,大家商量一个去哪9月',
'ajfeoajfifjeaof10月',
'架飞机饿哦就覅额11月',
'交付及诶阿佛加尔发放12月',
]
var oDiv = document.getElementById('tab');
var oLi=oDiv.getElementsByTagName('li');
var sDiv = oDiv.getElementsByClassName('text')[0];
for (var i =0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onmouseover = function(){
for (var i =0;i<oLi.length;i++) {
oLi[i].className ='';
}
this.className ='active';
sDiv.innerHTML= '<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div id='tab' class="calendar">
<ul>
<li class="active"><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>Stp</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 class="text">
<h2>1月活动</h2>
<p>快过年了,大家商量一个去哪里玩啊</p>
</div>
</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
