使用多个div，通过div的隐藏和显示来实现
当点击按钮一时，显示div1,隐藏div2和div3....，当点击按钮2时，显示div2,隐藏div1和div3....,以此类推
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TAB切换效果</title> <body > <input type="radio" id="btn1" name="btn" value="btn1" />btn1 <input type="radio" id="btn2" name="btn" value="btn2" />btn2 <input type="radio" id="btn3" name="btn" value="btn3" />btn3 <div style ="100px; height:100px; background:red; display:block; " id ="div1"> div1</div> <div style ="100px; height:100px; background:yellow; display:none;" id ="div2"> div2</div> <div style ="100px; height:100px; background:blue; display:none;" id ="div3"> div3</div> </body> <script> var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBtn3 = document.getElementById('btn3'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); oBtn1.onclick = function(){ if(oDiv1.style.display == 'none'){ oDiv1.style.display = 'block'; oDiv2.style.display = 'none'; oDiv3.style.display = 'none'; }else{ } }; oBtn2.onclick = function(){ if(oDiv2.style.display == 'none'){ oDiv1.style.display = 'none'; oDiv2.style.display = 'block'; oDiv3.style.display = 'none'; }else{ } }; oBtn3.onclick = function(){ if(oDiv3.style.display == 'none'){ oDiv1.style.display = 'none'; oDiv2.style.display = 'none'; oDiv3.style.display = 'block'; }else{ } }; </script>
