|
tab切換在各個(gè)網(wǎng)頁中是很常見的一種js效果,，在我們學(xué)習(xí)JS的過程中，這個(gè)效果也是我們必須要學(xué)會(huì)的，下面是它的代碼,； <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>tab切換</title> <meta name="keywords" content="" /> <meta name="Description" content="" /> <link rel="stylesheet" type="text/css" /> <style type="text/css"> ul,li,div {padding:0;margin:0;} ul li {float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:none;} ul li.fli {background-color:#ccc;color:red;} ul {overflow:hidden;zoom:1;list-style-type:none;} #tab_con {width:304px;height:200px;} #tab_con div {width:304px;height:200px;display:none;border:1px #bbb solid;border-top:none;} #tab_con div.fdiv {display:block;background-color:#ccc;} </style> </head> <body> <ul id="tab"> <li class="fli">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div id="tab_con"> <div class="fdiv">aaaa</div> <div>bbbb</div> <div>cccc</div> </div> JS代碼： <script type="text/javas var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tab_con").getElementsByTagName("div"); for(var i=0;i<tabs.length;i++){ tabs[i].on } function change(obj){ for(var i=0;i<tabs.length;i++) { if(tabs[i]==obj){ tabs[i].className="fli"; divs[i].className="fdiv"; } else{ tabs[i].className=""; divs[i].className=""; } } } </script>
結(jié)果顯示：   轉(zhuǎn)自 http://hi.baidu.com/darel1742/item/a0371ee4324ce81f8c3ea84f |
|
|
