Js實(shí)現(xiàn)選項(xiàng)卡的一個(gè)小程序,界面有點(diǎn)丑
<!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');
//獲得選項(xiàng)卡,是一個(gè)數(shù)組
var Btns = oDiv.getElementsByTagName('input');
//獲得下面的div,是一個(gè)數(shù)組
var Divs = oDiv.getElementsByTagName('div');
for (var i= 0;i<Btns.length;i++) {
//添加自定義的屬性,作為標(biāo)記號,JavaScript中添加不會(huì)報(bào)錯(cuò),但是在html中添加可能導(dǎo)致不兼容
Btns[i].index = i;
Btns[i].onclick = function(){
//每次顯示前需要將之前的狀態(tài)清空
for (var i= 0;i<Btns.length;i++) {
Btns[i].className="";
Divs[i].style.display = 'none';
}
//激活選項(xiàng)卡,顯示下面的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="培訓(xùn)" />
<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小程序日歷,實(shí)現(xiàn)方式和選項(xiàng)卡不同.功能一致
<!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 = [
'快過年了,大家商量一個(gè)去哪里玩啊',
'ajfeoajfifjeaof2月',
'架飛機(jī)餓哦就覅額3月',
'交付及誒阿佛加爾發(fā)放4月',
'快過年了,大家商量一個(gè)去哪5月',
'ajfeoajfifjeaof6月',
'架飛機(jī)餓哦就覅額7月',
'交付及誒阿佛加爾發(fā)放8月',
'快過年了,大家商量一個(gè)去哪9月',
'ajfeoajfifjeaof10月',
'架飛機(jī)餓哦就覅額11月',
'交付及誒阿佛加爾發(fā)放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)+'月活動(dòng)</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月活動(dòng)</h2>
<p>快過年了,大家商量一個(gè)去哪里玩啊</p>
</div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
