JavaScript特效二（tab選項卡、百度輸入法下拉列表）
一.tab選項卡
window.onload=function(){
//獲取三個按鈕var aInput = document.getElementsByTagName('input');
//獲取三個divvar aDiv = document.getElementsByTagName('div');
//遍歷三個按鈕for (var i = 0; i < aInput.length; i++) {
//儲存當前按鈕的下標aInput[i].index=i;
//當前按鈕的點選事件aInput[i].onclick=function(){
//將所有的按鈕的樣式清空，將所有的div隱藏。for (var i = 0; i < aInput.length; i++) {
aInput[i].className='';
aDiv[i].style.display='none';
}
//給當前按鈕新增樣式
this.className='active';
//顯示當前divaDiv[this.index].style.display='block';
}
}
}
2.百度輸入法下拉列表
<script type="text/javascript">
window.onload=function(){
var oBox = document.getElementById('box');
//獲取box下第一個p標籤
var oP = oBox.getElementsByTagName('p')[0];
//獲取box下第一個ul標籤
var oUl = oBox.getElementsByTagName('ul')[0];
//p的點選事件
oP.onclick=function(){
//判斷ul的display屬性。
if(oUl.style.display=='none')
{
oUl.style.display='block';
}
else {
oUl.style.display='none';
}
}
}