中文(繁体)
給朋友幫忙,寫了幾個簡單的選項卡，奉獻給有需要的朋友1）多點呼叫
<html> <head> <style> body { text-align:center; } .tab { width:432px; height:208px; margin:0 auto;overflow:hidden; border:1px solid #cccccc; } .menu,.menu li { margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center; } .menu { border-bottom:1px solid #cccccc; } .menu .default { width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('') no-repeat; } .menu . active { width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('') no-repeat; } #more { width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#FF0000; font-weight:normal; text -align:right } .con { width:422px; height:184px; margin:0 auto; } </style> <head> <body> <script> function init(ids,cons,dis){ document.getElementById(ids ).getElementsByTagName('li')[0].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; // document.getElementById(ids).onmouseover= function(){onmousOver(ids,cons,dis);}//滑鼠指向激發效果document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//點擊激發效果} function onmousOver(ids,cons,dis){ o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI'){ if (obj.className==' active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length-1;i++) {o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id ).innerHTML;} } } </script> <!--#1--> <div class='tab'> <ul id='nav1' class='menu'> <li id="l1" class= 'default'>第一新聞</li> <li id="l2" class='default'>第二新聞</li> <li id="l3" class='default'>第三新聞</li > <li id="l4" class='default'>第四新聞</li> <li id="l5" class='default'>第5新聞</li> </ul> <div class=' con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>要做一個選項卡，在論壇裡找了好久都沒有理想的效果</span> </div> <div id="div1_l2"> <span>所以特來問一下高手們，請大家幫忙！ </span> </div> <div id="div1_l3"> <span>找了幾個來改，都是頭部的菜單那裡太難定位了</span> </div> <div id=" div1_l4"> <span>當滑鼠放上去就變，不用點了！ </span> </div> <div id="div1_l5"> <span>增加了！ </span> </div> </div> <script> init('nav1','con1',"div1_"); </script> <!--#2--> <div class='tab' > <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新聞</li> <li id="l2" class='default'>第二新聞</li> <li id="l3" class='default'>第三新聞</li> <li id="l4" class='default'>第四新聞</li> <li id="more "><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div style="display:none"> <div id="div2_l1"> <span>要做一個選項卡，在論壇裡找了好久都沒有理想的效果</span> </div> <div id= "div2_l2"> <span>所以特來問高手們，請大家幫忙！ </span> </div> <div id="div2_l3"> <span>找了幾個來改，都是頭部的菜單那裡太難定位了</span> </div> <div id=" div2_l4"> <span>當滑鼠放上去就變，不用點了！ </span> </div> </div> <script> init('nav2','con2',"div2_"); </script> <!--#3--> <div class='tab' > <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新聞</li> <li id="l2" class='default'>第二新聞</li> <li id="l3" class='default'>第三新聞</li> <li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id ="div3_l1"> <span>要做一個選項卡，在論壇裡找了好久都沒有理想的效果</span> </div> <div id="div3_l2"> <span>所以特來問一下高手們，請大家幫忙！ </span> </div> <div id="div3_l3"> <span>找了幾個來改，都是頭部的菜單那裡太難定位了</span> </div> </div> < script> init('nav3','con3',"div3_"); </script> </body> </html>
