العربية
ولمساعدة أحد الأصدقاء، كتبت بعض علامات التبويب البسيطة وخصصتها للأصدقاء المحتاجين. 1) استدعاء نقاط متعددة
<html> <head> <style> body { text-align:center } .tab { width:432px height:208px; } .menu,.menu li { border:0; height:24px; .menu .default { width:84px; float:left; نشط { العرض: 84 بكسل؛ حجم الخط: 10 نقطة؛ ارتفاع الخط: 1 بكسل؛ no-repeat } #more { width:76px; -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);}// يتم تشغيل النقر the Effect} function onmousOver(ids,cons,dis){ o = o ||.window.event; var obj=o.target ||.o.srcElement; className==' active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li'); 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 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>
