事件高級（二）
- 可重用的選項卡實例
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
#div2 input {background:#CCC;}
#div2 .active {background:yellow;}
#div2 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
window.onload=function ()
{
tabSwitch('div1');
tabSwitch('div2');
};
function tabSwitch(id)
{
var oDiv=document.getElementById(id);
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[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="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
<div id="div2">
<input class="active" type="button" value="教育" />
<input type="button" value="財經" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
</body>
- 限制范圍的拖拽實例
- 磁性吸附的拖拽實例
- 解決拖拽問題一：選中文字
- 事件捕獲：setCapture()與releaseCapture()
- 合并代碼，共用函數
- 碰撞檢測原理
- 與DOM配合，制作帶框的拖拽實例
- 處理帶框拖拽的細節部分
- 用拖拽改變DIV大小實例
