ภาษาไทย
เพื่อช่วยเหลือเพื่อน ฉันจึงเขียนแท็บง่ายๆ สองสามแท็บและอุทิศให้กับเพื่อนที่ต้องการความช่วยเหลือ 1) เรียกหลายจุด
<html> <head> <style> body { text-align:center; } .tab { width:432px; margin:0 auto; overflow:hidden; } .menu, .menu li { ระยะขอบ: 0; ความสูง: 24px; .menu .default { width:84px; float:left; font-size:10pt; line-height:1.5; เคอร์เซอร์:ตัวชี้; ใช้งานอยู่ { width:84px; float:left; ไม่ทำซ้ำ; } #more { width:76px; float:left; font-size:10pt; -align:right } .con { width:422px; height:184px; ระยะขอบ: 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);}//ทริกเกอร์การคลิก the effect} ฟังก์ชั่น onmousOver(ids,cons,dis){ o = o ||. 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'); สำหรับ (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 > <li id="l4" class='default'>ข่าวที่สี่</li> <li id="l5" class='default'>ข่าวที่ห้า</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> <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 ="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> <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>
